window.open() 某些情况会被浏览器阻止弹出窗口及解决办法

  window.open() 的作用是创建一个新的浏览器窗口用来打开相关的资源,这是一个原生的 Javascript API 接口。

  有关 window.open() 的基本使用可以参考 mozilla 提供的  API 文档:window.open 。

  大部分现代的浏览器(泛指 Chrome / Firefox / IE 10+ / Safari)都默认开启了阻止弹出窗口的策略,原因是 window.open 被广告商滥用,严重影响用户的使用。这个阻止弹出窗口的操作,并不是直接封杀 windw.open(),而是会根据用户的行为来判断这次 window.open() 是否属于流氓操作。

  如果是由用户触发的动作所引起的 window.open 就不会被浏览器所阻止,比如写在 onclick 这些事件 handler 里的,但如果是代码自己触发的就会被阻止。

  但是问题来了,如果是用户点击后,我们的程序需要运行一些代码然后才执行 window.open() ,这种情况是否会被阻止呢?

  对于这种情况,我们来做个简单的例子,就是点击按钮之后将 window.open() 延迟一下,看看浏览器们有什么反应。

  当延迟 100 毫秒的时候,Chrome 会让窗口弹出,但是当延迟 2000 毫秒(即 2s )时这个操作会被阻止。经过多次试验,我发现这个临界值是 1000 毫秒。1000 毫秒的时候允许弹出框, 1001 毫秒的时候被阻止。

  大家可以通过修改代码中的延迟值来试。这个临界值,在 Safari / Chrome / Firefox (都是 for Mac) 下测试,均通过,都是 1001 毫秒的时候被阻止。

  结果拿到 IE 11 下测试,发现就算是 1 毫秒都会被阻止。

  我们先撇开 IE 的差异,我尝试把 setTimeout 转换成一些逻辑的代码放在 window.open() 前面。
  

  整体来说,Safari / Chrome / Firefox (桌面版) , 对于用户点击事件后的 window.open() 有 1s 的延迟容忍度。

  返回来测试了下 IE 11 的表现,发现:

  setTimeout 内的 window.open() 一律都被阻止,哪怕只是延迟 1毫秒
  对于逻辑运算的延迟则有比较大的容忍度,至少 3s 内依然被放行(没有再继续测试下去)
  然后顺便测试了下 Safari for iPad 8.0 的情况,发现:

  根据用户的设置(设置 -> Safari -> 阻止弹出窗口),无差别阻止或允许窗口的弹出窗。
  如果用户去掉了阻止弹出窗口的选项,那么无论是由用户点击的还是程序自行触发的,通通会弹出一个下的窗口询问用户是否要打开新的窗口。
  弄完之后得出的小结是:

  如果是由用户点击触发的 window.open() 代码前面,可以加上少量简单的逻辑代码来运行,但请控制在执行时间为 1s 内。
  不过由于各种原因,我们的 window.open() 会经常性的被阻止掉,虽说浏览器本身有对这个阻止事件做通知,但是由于用户是白痴的我们最好也在界面上做一些通知告知用户。我们可以利用 window.open () 的 return 值来判断 window.open 的执行情况,window.open 的返回值是一个打开的新窗口对象的引用, 如果 window.open 的操作被阻止,那么它的返回值就是 undefined 。

 我们知道了出现这种问题的原因,下面就给大家介绍几种解决办法:

  1.表单提交的方式

var form = document.createElement(‘form‘);
    form.action = ‘www.baidu.com?id=1‘;
    form.target = ‘_blank‘;

    form.method = ‘POST‘;

document.body.appendChild(form);
form.submit();

  这种方式,如果需要传递参数时,需要使用 POST 方法, 默认的 GET 方法无法传递参数。也就是新页面的url中没有参数部分。

另外,Ajax下载文件时也是用form 表单来模拟下载。

2.直接将打开窗口操作放在按钮/链接的onclick事件中

<a href="javascript:void(0)" onclick="window.open(url)"></a>

3.延迟这个打开操作

setTimeout(‘window.open(url);‘, 500); // 延迟时间不能太短 否则也会被拦截

4.通过JS打开新窗口会被拦截,换一种实现方式

var tempwindow=window.open(‘_blank‘); // 先打开页面
tempwindow.location=‘http://www.baidu.com‘; // 后更改页面地址

原文地址:https://www.cnblogs.com/weizhanyu/p/9987399.html

时间: 2024-10-17 01:02:37

window.open() 某些情况会被浏览器阻止弹出窗口及解决办法的相关文章

浏览器关闭 弹出提示

<script type="text/javascript"> window.a = 0; var rv = "确定要关闭吗?"; window.onbeforeunload = function () { var isIE = document.all ? true : false; if (isIE) { var n = window.event.screenX - window.screenLeft; var b = n > document

关于window.open弹出窗口被阻止的问题

原文:http://blog.csdn.net/fanfanjin/article/details/6858168 在web编程过程中,经常会遇到一些页面需要弹出窗口,但是在服务器端用window.open弹出的窗口会被IE阻止掉,showModalDialog弹出的窗口有时并不能满足我们需要,我们需要弹出新的浏览器窗口. 为什么我们编写的弹出窗口会被IE阻止呢,原来IE会自动判断弹出窗口的状态,它会阻止自动弹出的窗口,而通过我们用鼠标点击弹出的窗口,它是不会阻止的.这里就有一个问题,有人说:我

解决jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug

使用panel的onMove事件解决了panel,dialog以及window组件在被拖动时,会超出浏览器边界而无法拖回的情况. 当窗口被拖出浏览器有边界时,$(document).width();会增大,增大的部分就是窗口超过浏览器窗口的部分,所以right > browserWidth条件永远无法满足. 如果我们在思考得多一点,其实对于panel,dialog,window三个组件,我们往往要求的并不是它不能超出浏览器界限,而是要求它不能超出父元素界限,而且当父元素的overflow不是hi

session过期情况下弹出窗口显示2个登陆页面的问题处理

根据多年的web开发经验,一般当session过期之后,当用户点击任何一个按钮之类的,都是自动跳转到登陆页面,这个在网上有很多过滤器,拦截器实现. 那么在使用类似jquery easy ui的时候,如果页面有一些弹出窗口,是在弹出了窗口再去加载地址拉数据出来的,就会出现父页面跳到登陆页面,弹出页面也跳到登陆页面. 如何解决这个问题呢,我的办法如下: 首先,在过滤器中如果是session过期的话,自动跳到登陆页面,并且带上一个固定参数,在页面index.jsp中获取这个参数,如果存在. 其实就是在

jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案

jqueryeasyUI dialog 弹出窗口超出浏览器,导致不能关闭的bug解决方案 2014年8月30日 3233次浏览 相信很多前端朋友都用过jqueryeasyUI,jqueryeasyUI功能很强大,可以实现我们前端很多想要的效果,例如,下拉树也就是select tree等.但是jqueryeasyUI底层构建不是很好,简单的应用还可以,深入开发的话,还是推荐用extjs相对好一些! 今天的这篇文章,主要是解决我很久很久之前遇到的一个问题,今天重新在博客上发一遍,就是jqueryea

如何屏蔽掉浏览器后退按钮的几个解决办法

Q311 How do I disable the "Back" button of a browser? You are here: irt.org | FAQ | JavaScript | History | Q311 [ previous next ] Easy answer - you can't. Longer answer - you cannot totally remove the ability for the user to go back to the previ

IE浏览器JS提示缺少对象的解决办法

前端文件中写了一个AJAX取城市列表的JS方法.一个检测表单输入的JS方法,还有一些其它的JS代码. 整个页面代码在chrome和火狐浏览器下一切正常.但是在IE浏览器下在取城市列表的JS方法中提示缺少对象,这个不太具体的报错一开始就让我头疼,因为在chrome等浏览器中是可以运行的,所以初步估计是代码冲突,于是一段代码,一段代码的删,搞了一个小时,发现问题出在检查表单的JS方法里: 表单中有一个选择产品分类的下拉框,这个下拉框的name和ID都定义为:class ,然后在检查表单的JS方法里取

Js弹出窗口代码,window.open方法

<html><script language=JavaScript> <!--function click() {if (event.button==2) {window.open('#','popwindows',"toolbar=no,menubar=no,width=200,height=200")}}document.onmousedown=click//--></script><head><meta http-

js window.open()弹出窗口参数说明及居中设置

window.open()可以弹出一个新的窗口,并且通过参数控制窗口的各项属性. 最基本的弹出窗口代码 window.open('httP://codeo.cn/'); window.open()各参数详解 示例代码: window.open('httP://codeo.cn/', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, loc