最近在使用window.open时忽略了一个细节问题:window.open新打开一个窗口,但是有时却是新打开一个窗口有时打开一个新标签页。虽然对一般的需求来说,这个两种情况都无所谓,但是对于那种有强烈区分的需求来说还是要注意的。那么怎么会出现这种不同的打开情况呢,这要从window.open方法的用法和不同浏览器来区分。
1、window.open的用法容易忽视的细节
window.open方法有三个参数:
window.open(url, [name], [configuration])
url, 为要新打开页面的url
name,为新打开窗口的名字,可以通过此名字获取该窗口对象
configuration,为新打开窗口的一些配置项,比如是否有菜单栏、滚动条、长高等等信息
例如,新打开一个没有菜单栏、标题栏、工具栏,但是有滚动条、状态栏、地址栏且可伸缩窗口的方法调用如下:
window.open("index.html","newWindow","menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");
以上只是简要描述了window.open的方法,但是这个方法容易忽略的地方就是:
新打开窗口名字可以是自定义的值,此外还可以是以下几个值,与超链接a的target属性值相同
窗口name值
_blank
默认的,在新窗口打开链接的url
_self
在当前窗口打开链接url
_parent
在父窗口打开链接url
在顶级窗口打开url
framename
在指定的框架中打开链接url
2、window.open打开新窗口还是打开新标签页
调用window.open是打开新窗口,还是打开新标签页,其实没有什么要紧关系,但是有些需求在这方面有很强的意愿时,那就得区分一下了。具体的打开什么还是根据具体情况来定的,以下结论是经过本人测试得出的,若有不正确的地方,请大家批评指正。
1、window.open(url)或者window.open(url, name),其中name为_blank
标准浏览器、IE9+是新标签打开链接url
ie6-8是新窗口打开链接url
2、window.open(url, name),其中name为非_blank的其他4个值
此时会会在指定窗口或者frame打开链接url
3、window.open(url, name, configration)
只要配置了configration,所有浏览器都是新窗口打开链接url
3、使用window.open方法打开的窗口可能被拦截的替代方案
现在有些浏览器为了安全起见,可能会阻止window.open打开的链接url,不管是以标签还是以窗口打开。这时可能需要用户进行浏览器设置允许弹新页,让用户设置浏览器是极不可取的做法,尤其像电商类网站,那么有其他替代方案呢?
答案当然是有的,
利用超链接打开的url是不会被拦截的可以实现这一点
。具体做法是结合事件手动触发机制。下面是
HTML:模拟链接被按下,在新标签页打开页面,不使用window.open(可能被拦截)
这篇博客给的一个简单的实例,这篇文章给出的事件分发机制是针对标准浏览器的:
<
meta
http-equiv
="Content-type"
content
="text/html; charset=utf-8"
>
<
title
>
Title
</
title
>
<
script
src
="jquery.js"
></
script
>
<
script
type
="text/javascript"
>
$(
function
() {
$(
"
#btn
"
).click(
function
() {
//
var a = $('a')[0];
var
a
=
$(
"
<a href='http://www.apple.com' target='_blank'>Apple</a>
"
).get(
0
);
var
e
=
document.createEvent(
'
MouseEvents
'
);
e.initEvent(
'
click
'
,
true
,
true
);
a.dispatchEvent(e);
</
script
>
</
head
>
<
input
type
="button"
value
="Go to Apple"
id
="btn"
>
</
body
>
</
html
>