使window.open() 全兼容IE, Firefox, Chrome的最新写法

jackxiang 2014-5-28 16:45 | |
背景:新窗口打开下载页时出现Firefox第一次会提示拦截。

window.open() 可谓是 弹窗广告的利器, 不过因为浏览器的拦截机制越来越完善, 打开几率也越来越低了.
之前在百度上看到很多种写法,如:
    通过 js 去触发某按钮的click事件
    通过 js 去触发某form的submit事件,并且form的target 设置为_blank
    不过经过我的测试,发现都已经不再兼容了于是想到了下面这个办法:



加入关闭功能:

其中用到的原理就是
通过用户真实的点击 触发window.open() 打开一个新窗口(因为是真实的用户行为,浏览器会认为是用户意愿,不会进行拦截)
然后再通过js去更改新窗口的 location

来自:http://www.phplover.cn/post/480.html


原理:
window.open是javascript函数,该函数的作用是打开一个新窗口或这改变原来的窗口,不过一般用来的是打开新窗口,因为修改原来的网页地址,可以有另一个函数,那就是window.location,他可以重定向网页地址,使网页跳转到另一个页面。

我现在要说的是window.open函数的几个使用策略,一般情况下,如果你直接在js中调用window.open()函数去打开一个新窗口,浏览器会拦截你,认为你将弹出广告等用户不想得到的窗体,所以如果不想让浏览器拦截你,你可以将这个函数改为用户点击时触发,这样浏览器就认为是用户想访问这个页面,而不是你直接弹出给用户。

所以常用的方法就是在超链接里加入onclick事件,如<a href="javascript:void(0)" onclick="window.open()"></a>这样用户点击这个超链接,浏览器会认为它是打开一个新的链接,所以就不会拦截。

可是有时候我们会遇到想要弹出一个窗口,可是却是在onckick事件执行后,才去弹出来的,这时就会被浏览器拦截,我们可以通过下面的方法来避免,就是先用window.open打开一个窗口,然后修改地址。如var tempwindow=window.open('_blank');打开一个窗口,然后用tempwindow.location='http://www.baidu.com';使这个窗口跳转到百度,这样就会呈现弹出百度窗口的效果了。

方法二:
由于在使用window.open时,在很多情况下,弹出的窗口会被浏览器阻止,但若是使用a链接target='_blank',则不会,基于这一特点,自己封装了一个open方法:

实践OK代码如下所示:

调用方式如下:
<input type="button" id="btn" value="向东博客" onclick="openwin('http://jackxiang.com');" />

作者:jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
地址:http://jackxiang.com/post/7225/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!


最后编辑: jackxiang 编辑于2014-5-28 17:20
评论列表
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]