解决弹出的窗口window.open会被浏览器阻止的问题

问题现象

最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,有时候会一直连接,有时候会偶尔拦截,

尝试了很多方法,走了很多弯路,总结一下结果分享大家

原因分析&深入研究

1 当浏览器检测到非用户操作产生的新弹出窗口,则会对其进行阻止。因为浏览器认为这不是用户希望看到的页面

2 在chrome的安全机制里面,非用户触发的window.open方法,是会被拦截的。

var btn = $(‘#btn‘);
btn.click(function () {
    //不会被拦截
    window.open(‘http://cssha.com‘)
});

如上  window.open是用户触发的时候,是不会被拦截的,可以正常打开新窗口

var btn = $(‘#btn‘);
btn.click(function () {
    $.ajax({
        url: ‘ooxx‘,
        success: function (url) {
            //会被拦截
            window.open(url);
        }
    })
});

如上 用户没有直接出发window.open,而是发出一个ajax请求,window.open方法被放在了ajax的回调函数里,这样的情况是会被拦截的

解决方案

先弹出一个页面,再进行ajax请求,这样就不会被拦截, 实例代码如下

var btn = $(‘#btn‘);
btn.click(function () {
    //打开一个不被拦截的新窗口
    var newWindow = window.open();
    $.ajax({
        url: ‘ooxx‘,
        success: function (url) {
            //修改新窗口的url
            newWindow.location.href = url;
        }
    })
});

继续进行优化

var btn = $(‘#btn‘);
btn.click(function () {

    //打开一个不被拦截的新窗口
  var adPopup = window.open(‘about:blank‘, ‘_blank‘,‘width=‘+window.screen.width+‘,height=‘+window.screen.height+‘, ...‘);
    $.ajax({
        url: ‘ooxx‘,     type:‘post‘,     dataType:‘json‘,
        success: function (url) {
            //修改新窗口的url       adPopup.blur();       adPopup.opener.focus();       adPopup.location = url;

        }
    })
});

附带其他弹框方式

//a标签动态clickfunction newWin(url, id) {
              var a = document.createElement(‘a‘);
              a.setAttribute(‘href‘, url);
              a.setAttribute(‘target‘, ‘_blank‘);
              a.setAttribute(‘id‘, id);
              // 防止反复添加
              if(!document.getElementById(id)) document.body.appendChild(a);
              a.click();
  } //定时弹框 setTimeout(‘window.open(url);‘, 1);

参考文章

http://www.520ued.com/article/5417ef368d31c11e3b0003ff

http://zakwu.me/2015/03/03/dan-chu-chuang-kou-bei-liu-lan-qi-lan-jie-de-jie-jue-fang-an/

http://blog.csdn.net/starnight_cbj/article/details/5190283

时间: 2024-10-06 16:13:46

解决弹出的窗口window.open会被浏览器阻止的问题的相关文章

网页上弹出pop窗口实例,(document).height()与$(window).height()的区别

#dvbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}        #dvpop{position:absolute;display:none;width:auto; height:auto; z-in

解决python在windows上运行弹出cmd窗口(dos窗口)

运行python程序的时候会在背景显示一个cmd,要想不显示其实很简单(虽然是我找了1个小时...才了解的基本知识) 方法1:pythonw xxx.py 方法2:将.py改成.pyw (这个其实就是使用脚本解析程序pythonw.exe) 原文: 1) Try changing the file extension to .pyw. Double-clicking a .pyw will use pythonw.exe instead of python.exe. python.exe运行的时

JS 弹出模态窗口解决方案

最近在项目中使用弹出模态窗口,功能要求: (1)模态窗口选择项目 (2)支持选择返回事件处理 在IE中有showModalDialog 方法,可以很好的解决该问题,但是在Chrome中和FF中就有问题了,它们不支持showModalDialog方法.因此需要采用不同的处理方法. IE中的窗口打开函数option参数定义之间必须用分号分隔,Chrome是用逗号分隔,使用时需要注意这点. var option = ""; //居中显示, option = "dialogWidth

弹出一个窗口

经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,  或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息  .警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这样的页面  效果非常的容易,只要往该页面的HTML里加入几段Javascript代码即可实现.下  面俺就带您剖析它的奥秘.  [1.最基本的弹出窗口代码]    其实代码非常简单:  <SCRIPT LANGUAGE="javascript">  <!-- wi

SharePoint 2013 showModalDialog 弹出模式窗口

1. SharePoint 弹出框 本文讲述SharePoint 2013 中使用 SP.UI.ModalDialog.showModalDialog时 showModalDialog  未定义的问题. function showDialog(title,url,width,height) { var options = { url:url, args: 7, title: title, dialogReturnValueCallback: dialogCallback }; if (width

创建一个弹出DIV窗口

创建一个弹出DIV窗口 摘自:   http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的 JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战: 其次,兼容性不够强——有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种

VS C# .NET WebBrowser控件 利用插入JS代码,实现控制弹出IE窗口

最近在做一个客户端程序,使用到自带的WebBrowser控件时,发现当JS调用window.open()或a标签的target="_blank"时使用的是弹出IE窗口,不知道为什么是这种设计,根本不满足需求嘛.上网查了一下相关资料,发现这个控件并没有属性能控制这个功能,于是找第三方控件,发现也还是不行(可能是我不够仔细尝试),而且要多出个几十兆的DLL.经过我几个小时的努力,放弃了...! 知道C#是可以与网页的JS交互的,于是想到网页上重写window.open()的方法,建一个HT

安装jmeter以后打开会弹出命令窗口提示:WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0 x80000002. Windows RegCreateKeyEx(...) returned error code 5.

安装jmeter以后打开会弹出命令窗口提示: WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0 x80000002. Windows RegCreateKeyEx(...) returned error code 5. 应该怎么解决: win+R输入regedit 打开REGEDIT.EXE(真恨微软和其regedit.reg). 然后找到HKEY_LOCAL_MACHINE \ SO

Jquery+div+css实现弹出登录窗口

基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http: