JavaScript中window.open用法实例详解


Posted in Javascript onApril 15, 2015

本文较为详细的分析了JavaScript中window.open用法。分享给大家供大家参考。具体如下:

<script LANGUAGE="javascript">

window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no') //写成一行

</script>

参数解释:

js脚本开始;
 
window.open 弹出新窗口的命令;
'page.html' 弹出窗口的文件名;
'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;
height=100 窗口高度;
width=400 窗口宽度;
top=0 窗口距离屏幕上方的象素值;
left=0 窗口距离屏幕左侧的象素值;
toolbar=no 是否显示工具栏,yes为显示;
menubar,scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小,yes为允许;
location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

1、用函数控制弹出窗口
 
下面是一个完整的代码。

<html>
<head>
<script LANGUAGE="Javascript">
<!-- 
function openwin()
{ window.open("page.html", "newwindow", "height=100,width=400, toolbar=no , menubar=no, scrollbars=no,resizable=no, location=no, status=no") //写成一行
}
//-->
</script>
</head>
<body onload="openwin()">
...任意的页面内容...
/body>
</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢?
 
方法一: 浏览器读页面时弹出窗口;
 
方法二: 浏览器离开页面时弹出窗口;
 
方法三:用一个连接调用:打开一个窗口 注意:使用的“#”是虚连接。
 
方法四:用一个按钮调用:

2、定时关闭弹出的窗口 (有些网站注册成功后显示n秒转到注册前的那页信息,或自己跳转)
 
下面我们再对弹出的窗口进行一些控制,效果就更好了。
 
如果我们再将一小段代码 加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则 ...),让它10秒后自动关闭是不是更酷了?
 
首先,将如下代码加入page.html文件的区:

<script language="Javascript">
function closeit()
{
setTimeout("self.close()",10000) //毫秒
}
</script>

然后,再用 这一句话代替page.html中原有的这一句就可以了。
 
(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码 ,10秒钟后就自行关闭该窗口。

3、 仅弹出一次窗口(cookie控制)
 
回想一下,上面的弹出窗口虽然酷,但是有一点小毛病,比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),
 
那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?有解决的办法吗?
 
我们使用cookie来控制一下。
 
首先,将如下代码加入主页面HTML的区:

<script>
function openwin()
{window.open("page.html","","width=200,height=200")}
function get_cookie(Name)
{
 var search = Name + "="
 var returnvalue = "";
 if (documents.cookie.length > 0) {
 offset = documents.cookie.indexOf(search)
 if (offset != -1) {
 offset += search.length
 end = documents.cookie.indexOf(";", offset);
 if (end == -1)
 end = documents.cookie.length;
 returnvalue=unescape(documents.cookie.substring(offset,end))
 }
 }
 return returnvalue;
}
function loadpopup(){
 if (get_cookie('popped')==''){
 openwin() ;
documents.cookie="popped=yes" ;
 }
}
</script>

然后,用(注意不是openwin而是loadpop啊!) 替换主页面中原有的

这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
vue filters的使用详解
Jun 11 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 #Javascript
JavaScript表格常用操作方法汇总
Apr 15 #Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 #Javascript
详细解密jsonp跨域请求
Apr 15 #Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 #Javascript
javascript中Math.random()使用详解
Apr 15 #Javascript
You might like
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
JS实现移动端双指缩放和旋转方法
2019/12/13 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
python遍历文件夹找出文件夹后缀为py的文件方法
2018/10/21 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
python opencv读mp4视频的实例
2018/12/07 Python
python issubclass 和 isinstance函数
2019/07/25 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
柏林通行证:Berlin Pass
2018/04/11 全球购物
化工工艺专业求职信
2013/09/22 职场文书
星级党支部申报材料
2014/05/31 职场文书
工作所在部门证明
2014/09/21 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS