window.open()详解及浏览器兼容性问题示例探讨


Posted in Javascript onMay 29, 2014

一、基本语法:
window.open(pageURL,name,parameters)
其中:
pageURL 为子窗口路径
name 为子窗口名字
parameters 为窗口参数(各参数用逗号分隔)

二、示例

<script type="text/javascript"> 
window.open('page.html','newwindow','height=500,width=800,top=0,left=0, 
toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 
</script>

page.html将在新窗体newwindow中打开,宽为800,高为500,距屏顶0象素,屏左0象素,

无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。

各浏览器对window.open()的窗口特征sFeatures参数支持程度存在差异

各浏览器运行结果汇总:
window.open()详解及浏览器兼容性问题示例探讨 

上表中为各个浏览器对 features 各参数选项的支持程度,其中需要特殊说明的如下:

【标注1】:IE7 IE8 Firefox Chrome Safari 中,当"menubar"选项为"yes"时,默认不显示菜单栏,需要按ALT键后菜单栏才可显示;相反当 "menubar"选项为"no"时,即使按了ALT键也不会显示菜单栏。
【标注2】:Safari中,开启"location"选项与开启"toolbar"选项时显示效果一致。
【标注3】:IE6 IE8 Chrome 中,使用"top"和"left"定位,如果出现设定的的坐标值过大,弹出窗口将可能显示在屏幕可视范围外。
【标注4】:IE7 Firefox Safari Opera中,使用"top"和"left"定位,如果出现设定的的坐标值过大,窗口会自动调整"top"与"left"值,确保窗口正常显示在屏幕可视区域内。
【标注5】:Chrome Opera中,不支持在没有设定"width"与"height"值的情况下独立使用"left"和"top",此时"left""top"设定值均不生效。
【标注6】:Chrome 中,不支持在没有设定"left"和"height"值的情况下独立使用"width"与"height",此时"width" "height"设定值均不生效。结合【标注5】说明可知,在Chrome中弹出窗口不论想要设定宽高或位置中的一个或几个值,都必须将他们全部赋值,否则都将不起作用。
【标注7】:Firefox Chrome 中,地址栏会始终显示。
【标注8】:Opera 中,地址栏默认不显示,但可以点击页面最上方横条使他显示出来,设置"location=yes"后地址栏会自动显示出来。
【标注9】:Chrome Opera 中,不论"menubar"值如何设置,永远不显示菜单栏。
【标注10】:Firefox Safari Chrome Opera中无论"resizable"值如何设置,窗口永远可由用户调整大小。
【标注11】:Safari Chrome 中,在页面存在滚动条的情况下,无论"scrollbars"值如何设置,滚动条始终可见。
【标注12】:IE7 在 Windows XP SP3 系统中默认可以支持"status "参数隐藏状态栏;而在 Windows Vista系统默认环境下不支持"status"参数,状态栏始终可见.这与两个系统中默认的 IE7 小版本号不同有关,前者版本号较低,后者版本号较高。
【标注13】:Firefox 中,无论"status"值如何设置,状态栏始终可见,而 Chrome Opera中,则与前者相反,状态栏始终不可见。
【标注14】: Chrome Opera 中,无论"toolbar"值如何设置,始终不显示工具栏。
综上所述,可见window.open方法的sFeatures参数支持程度存在巨大差异,使用时须谨慎为之。

一般我们用window.open打开页面都需要居中显示,示例代码:

var width=800; //弹出窗口的宽度; 
var height=500; //弹出窗口的高度; 
var top = (window.screen.availHeight-height)/2; //窗口的垂直位置; 
var left = (window.screen.availWidth-width)/2; //窗口的水平位置; 
window.open('page.html','newwindow','height='+height+',width='+width+',top='+top+',left='+left+', 
toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')

availHeight和height的区别
window.screen.width 返回当前屏幕宽度(分辨率值) 
window.screen.height 返回当前屏幕高度(分辨率值) 
screen.availWidth,screen.availHeight是指除去taskbar(任务栏)以外的长宽
Javascript 相关文章推荐
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
node.js实现带进度条的多文件上传
Mar 27 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 #Javascript
href下载文件根据id取url并下载
May 28 #Javascript
javascript自定义的addClass()方法
May 28 #Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 #Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 #Javascript
HTML页面登录时的JS验证方法
May 28 #Javascript
22点关于jquery性能优化的建议
May 28 #Javascript
You might like
ASP知识讲座四
2006/10/09 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
PHP加密解密函数详解
2015/10/28 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
同学聚会老师邀请函
2014/01/28 职场文书
组工干部对照检查材料
2014/08/25 职场文书
试用期辞职信范文
2015/03/02 职场文书
个人德育工作总结
2015/03/05 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android
使用Python开发冰球小游戏
2022/04/30 Python