window.open()详解及浏览器兼容性问题示例探讨
更新时间：2014年5月31日 01:02 点击：1827
一、基本语法：
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参数支持程度存在差异
各浏览器运行结果汇总：
上表中为各个浏览器对 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(任务栏)以外的长宽
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参数支持程度存在差异
各浏览器运行结果汇总：
上表中为各个浏览器对 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(任务栏)以外的长宽
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 其实挺简单的就是if(navigator.userAgent.indexOf('UCBrowser') > -1) {alert("uc浏览器");}else｛//不是uc浏览器执行的操作｝如果想测试某个浏览器的特征可以通过如下方法获取JS获取浏览器信息 浏览器代码名称：navigator...2015-11-08
js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
第一种，只区分浏览器，不考虑版本 复制代码 代码如下:function myBrowser(){ var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOp...2014-05-31- 这篇文章主要介绍了详解Vue Cli浏览器兼容性实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-09
- 这篇文章主要介绍了如何使用 JavaScript 操作浏览器历史记录 API，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下...2020-11-24
- 这篇文章主要介绍了Python获取浏览器窗口句柄过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-26
- 这篇文章主要给大家介绍了关于vue如何调用浏览器分享的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-20
- 在网站前端开发中，浏览器兼容性问题本已让我们手忙脚乱，Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题，要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。 JavaScrip...2014-05-31
- 这篇文章主要介绍了JAVA读取文件流,设置浏览器下载或直接预览操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-09
- 由于国内好几个浏览器都是双核浏览器（蛋痛，做一个浏览器壳就说国产，而且使用率高），有时打开网页会出现不兼容模式，在极速模式下是好的，现在我们来用代码实现网页自动调用国内...2016-09-20
- 这篇文章主要介绍了C# 模拟浏览器并自动操作的实例代码，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-11-03
- 这篇文章主要介绍了Python爬虫之Selenium实现关闭浏览器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-04
- 这篇文章主要介绍了vue项目中禁用浏览器缓存配置案例,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-09-12
- 这篇文章主要介绍了JS跨浏览器解析XML应用过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-16
- 在jquery.1.9以前的版本，可以使用$.browser很轻松的判断浏览器的类型和版本，但是在1.9中和以后的版本中，$.browser已经被删除，下面就介绍一下如何实现此功能，希望能够给需要的朋友带来帮助...2016-01-14
- 小编推荐的这篇文章介绍了两种Ajax打开新窗口被浏览器拦截的解决方法，有需要的同学可以参考一下 最近在做支付时发现打开支付窗口时被浏览器拦截了，百度了一下才...2017-01-22
- 本文章来为各位一篇关于echarts使图标能自适应浏览器窗口变化，及经纬度转换的例子，希望文章能够帮助到各位同学哦。 1、echarts使图标能自适应浏览器窗口变化 wind...2016-09-20
- 这篇文章主要给大家介绍了关于angular浏览器兼容性问题的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者使用angular具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧...2020-07-26
- php判断用户浏览器类型与来自页面 function chkre(){ global $_SERVER, $r_main; if(isset($_SERVER['HTTP_REFERER'])){ $u=parse_url($_SERVER['HTTP_RE...2016-11-25