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 相关文章推荐
javascript function、指针及内置对象
Feb 19 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
原生javascript实现无间缝滚动示例
Jan 28 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 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
一个PHP二维数组排序的函数分享
2014/01/17 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
php微信开发之关注事件
2018/06/14 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
JS 表单验证大全
2011/11/23 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
文艺晚会策划方案
2014/06/11 职场文书
教师调动申请报告
2015/05/18 职场文书
党支部意见范文
2015/06/02 职场文书
航班延误投诉信
2015/07/02 职场文书