打印

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 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 支持 支持 支持 不支持7 支持2 不支持7 支持8
menubar 支持 支持1 支持1 支持1 支持1 不支持9 不支持9
resizable 支持 支持 支持 不支持10 不支持10 不支持10 不支持10
scrollbars 支持 支持 支持 支持 不支持11 不支持11 支持
status 支持 支持12 支持 不支持13 支持 不支持13 不支持13
titlebar 不支持 不支持 不支持 不支持 不支持 不支持 不支持
toolbar 支持 支持 支持 支持 支持2 不支持14 不支持14
top 支持3 支持1 支持3 支持4 支持4 不支持5 不支持5
left 支持3 支持1 支持3 支持4 支持4 不支持5 不支持5
width 支持 支持 支持 支持 支持 不支持6 支持
height 支持 支持 支持 支持 支持 不支持6 支持
top left 支持3 支持4 支持3 支持4 支持4 不支持5 不支持5
width height 支持 支持 支持 支持 支持4 支持1 支持
top left width height 支持 支持4 支持3 支持4 支持4 支持3 支持4

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

参见

知识库

相关问题

测试环境

操作系统版本: Windows 7 Ultimate build 7600
浏览器版本: IE6 (Window xp sp3)
IE7 (Window xp sp3)
IE8
Firefox 3.6.10
Chrome 8.0.552.0 dev
Safari 5.0.2
Opera 10.63
测试页面: window_open_features_param.html
本文更新时间: 2010-10-13

关键字

window open features channelmode directories fullscreen location menubar resizable scrollbars status titlebar toolbar top left width height