各浏览器对 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 onclick="openW3C('channelmode=no')">channelmode=no</button>

<button onclick="openW3C('channelmode=no')">channelmode=yes</button><br />

directories sFeatures:<button onclick="openW3C('directories=no')">directories=no</button>

<button onclick="openW3C('directories=yes')">directories=yes</button><br />

fullscreen sFeatures:<button onclick="openW3C('fullscreen=no')">fullscreen=no</button>

<button onclick="openW3C('fullscreen=yes')">fullscreen=yes</button><br />

location sFeatures:<button onclick="openW3C('location=no')">location=no</button>

<button onclick="openW3C('location=yes')">location=yes</button><br />

menubar sFeatures:<button onclick="openW3C('menubar=no')">menubar=no</button>

<button onclick="openW3C('menubar=yes')">menubar=yes</button><br />

resizable sFeatures:<button onclick="openW3C('resizable=no')">resizable=no</button>

<button onclick="openW3C('resizable=yes')">resizable=yes</button><br />

scrollbars sFeatures:<button onclick="openW3C('scrollbars=no')">scrollbars=no</button>

<button onclick="openW3C('scrollbars=yes')">scrollbars=yes</button><br />

status sFeatures:<button onclick="openW3C('status=no')">status=no</button>

<button onclick="openW3C('status=yes')">status=yes</button><br />

titlebar sFeatures:<button onclick="openW3C('titlebar=no')">titlebar=no</button>

<button onclick="openW3C('titlebar=yes')">titlebar=yes</button><br />

toolbar sFeatures:<button onclick="openW3C('toolbar=no')">toolbar=no</button>

<button onclick="openW3C('toolbar=yes')">toolbar=yes</button><br />

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

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

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

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

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

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

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

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

各浏览器运行结果汇总：

	IE6	IE7	IE8	Firefox	Safari	Chrome	Opera
channelmode	不支持	不支持	不支持	不支持	不支持	不支持	不支持
directories	不支持	不支持	不支持	不支持	不支持	不支持	不支持
fullscreen	支持	支持	支持	不支持	不支持	不支持	不支持
location	支持	支持	支持	不支持⁷	支持²	不支持⁷	支持⁸
menubar	支持	支持¹	支持¹	支持¹	支持¹	不支持⁹	不支持⁹
resizable	支持	支持	支持	不支持¹⁰	不支持¹⁰	不支持¹⁰	不支持¹⁰
scrollbars	支持	支持	支持	支持	不支持¹¹	不支持¹¹	支持
status	支持	支持¹²	支持	不支持¹³	支持	不支持¹³	不支持¹³
titlebar	不支持	不支持	不支持	不支持	不支持	不支持	不支持
toolbar	支持	支持	支持	支持	支持²	不支持¹⁴	不支持¹⁴
top	支持³	支持¹	支持³	支持⁴	支持⁴	不支持⁵	不支持⁵
left	支持³	支持¹	支持³	支持⁴	支持⁴	不支持⁵	不支持⁵
width	支持	支持	支持	支持	支持	不支持⁶	支持
height	支持	支持	支持	支持	支持	不支持⁶	支持
top left	支持³	支持⁴	支持³	支持⁴	支持⁴	不支持⁵	不支持⁵
width height	支持	支持	支持	支持	支持⁴	支持¹	支持
top left width height	支持	支持⁴	支持³	支持⁴	支持⁴	支持³	支持⁴

上表中为各个浏览器对 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 "

原文：http://www.w3help.org/zh-cn/causes/BX1053