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

标准参考

无。

问题描述

使用 window.open 方法可以弹出一个新窗口，其中 open 方法的 sFeatures 参数选项在各浏览器中支持程度不一，这有可能导致同样的代码使各浏览器中弹出窗口形式产生巨大差异。

造成的影响

会造成不同浏览器中打开的窗口位置、尺寸出现差异；以及是否有地址栏、菜单栏、状态栏、滚动条和是否全屏等表现形式存在出入。

受影响的浏览器

所有浏览器

问题分析

open 方法属于 window 对象，他用来打开一个新浏览器窗口， 其中window 对象又隶属 BOM (Browser Object Model) 范畴。遗憾的是 BOM 还没有被标准化，它由各个浏览器厂商制定，因此会出现实差异。

时至今日，HTML5 规范草案中已经开始标准化 BOM，window 对象也在草案之中，草案中对 open 方法的形参数 window.open([ url [,target[,features[,replace]]]]) 做了简要列举与介绍。但是在讲到 features 时仅写着"该参数功能说明忽略"，具体参数功能尚不可知。

在可查找到的浏览器厂商官方 developer 站点中， 仅有 mozilla MDC 以及 micorsoft MSDN 写有对 open 方法 features 参数说明的。其中，MDC 介绍非常简洁，仅说明参数格式，而 MSDN 中 采用了详细的参数格式和可选键值对说明，对于选项值以及选项的默认值本文将不再罗列，读者可以参看下方的 MSDN 文档说明。

Firefox 中 window.open 方法的详细说明请参看 MDC ：window.open

IE 中 window.open 方法的详细说明请参看 MSDN ：open Method

本文中将采用 MSDN 中列举的 features 参数选项作为评测标准，并构造以下测试代码：

<script>
function openW3C(sFeatures){
  window.open("http://www.w3.org/","",sFeatures,false);
}
</script>
<h2>请在各浏览器内依次点击下列按键，根据显示效果来判断 window.open 方法是否支持某项特性设定。</h2>

channelmode sFeatures: <button οnclick="openW3C('channelmode=no')">channelmode=no</button>
<button οnclick="openW3C('channelmode=no')">channelmode=yes</button><br />

directories sFeatures:<button οnclick="openW3C('directories=no')">directories=no</button>
<button οnclick="openW3C('directories=yes')">directories=yes</button><br />

fullscreen sFeatures:<button οnclick="openW3C('fullscreen=no')">fullscreen=no</button>
<button οnclick="openW3C('fullscreen=yes')">fullscreen=yes</button><br />

location sFeatures:<button οnclick="openW3C('location=no')">location=no</button>
<button οnclick="openW3C('location=yes')">location=yes</button><br />

menubar sFeatures:<button οnclick="openW3C('menubar=no')">menubar=no</button>
<button οnclick="openW3C('menubar=yes')">menubar=yes</button><br />

resizable sFeatures:<button οnclick="openW3C('resizable=no')">resizable=no</button>
<button οnclick="openW3C('resizable=yes')">resizable=yes</button><br />

scrollbars sFeatures:<button οnclick="openW3C('scrollbars=no')">scrollbars=no</button>
<button οnclick="openW3C('scrollbars=yes')">scrollbars=yes</button><br />

status sFeatures:<button οnclick="openW3C('status=no')">status=no</button>
<button οnclick="openW3C('status=yes')">status=yes</button><br />

titlebar sFeatures:<button οnclick="openW3C('titlebar=no')">titlebar=no</button>
<button οnclick="openW3C('titlebar=yes')">titlebar=yes</button><br />

toolbar sFeatures:<button οnclick="openW3C('toolbar=no')">toolbar=no</button>
<button οnclick="openW3C('toolbar=yes')">toolbar=yes</button><br />

top sFeatures:<button οnclick="openW3C('top=10')">top=10</button><br />

left sFeatures:<button οnclick="openW3C('left=10')">left=10</button><br />

width sFeatures:<button οnclick="openW3C('width=100')">width=100</button><br />

height sFeatures:<button οnclick="openW3C('height=100')">height=100</button><br />

top and left sFeatures:<button οnclick="openW3C('top=20,left=20')">top and left is 20</button><br />

width and height sFeatures:<button οnclick="openW3C('width=100,height=100')">width and height is 100</button><br />

top and left and width and height sFeatures:<button οnclick="openW3C('top=200,left=200,width=200,height=200')">top and left and width and height is 200</button>

由于各浏览器有不同的弹出窗口自动处理机制，为了不影响测试准确性，在运行测试代码之前因将所有浏览设置为可以打开弹出窗口。

各浏览器运行结果汇总：

上表中为各个浏览器对 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 方法的 sFeatures 参数时，推荐如下配置字符串，可确保所有浏览器表现基本一致：
" top=nInt,left=nInt,width=nInt,height=nInt,location=yes,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no "

转载于:https://www.cnblogs.com/xust/articles/2749338.html