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 相关文章推荐
用于table内容排序
Jul 21 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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获得文件扩展名三法
2006/11/25 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
js URL参数的拼接方法比较
2012/02/15 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
JavaScript入门基础
2015/08/12 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
jQuery ztree实现动态树形多选菜单
2016/08/12 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
uniapp实现横向滚动选择日期
2020/10/21 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
Python守护进程用法实例分析
2015/06/04 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
对python中的logger模块全面讲解
2018/04/28 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
pygame实现弹球游戏
2020/04/14 Python
Python中过滤字符串列表的方法
2020/12/22 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
台湾深度自由行旅游平台:Tripbaa趣吧
2017/10/10 全球购物
工地质量标语
2014/06/12 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
北京颐和园导游词
2015/01/30 职场文书
JS的深浅复制详细
2021/10/16 Javascript