window.open被浏览器拦截的解决方案

标签: window open 浏览器 | 发表时间:2015-03-03 13:17 | 作者:wfsheep
出处:http://www.iteye.com

现象

最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,搞得人无比郁闷啊,虽然在自己的环境可以对页面进行放行,但是对用户来说,不能要求用户都来通过拦截。何况当出现拦截时,很多小白根本不知道发生了啥,不知道在哪里看被拦截的页面,简直悲催啊~~。

另外,可以发现, 当window.open为用户触发事件内部或者加载时,不会被拦截,一旦将弹出代码移动到ajax或者一段异步代码内部,马上就出现被拦截的表现了

原因分析&深入研究

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

比如对js中直接执行的,如下代码:

        //  直接打开一个页面
    window.open('//www.baidu.com', '_blank');
浏览器 ie8 chrome 40 firefox 34 opera 27 safari 5.1.7
是否阻止弹出 N N Y Y Y

而对于如下代码:

            document.body.addEventListener('click', function() {
            window.open('//www.baidu.com', '_blank');
        });

所有浏览器都不会拦截

综上所述,各浏览器对拦截时机的判断不一致,而对于放在ajax回调中的代码,反应又不相同了,这里就不再赘述。但是,被浏览器拦截我们代码中要弹出的窗口并不是程序员所希望的。

解决方案:

1、使用a标签替代

给出如下函数,将此函数绑定到click的事件回调中,就可以避免大部分浏览器对窗口弹出的拦截:

      function 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();
  }

2、使用form的submit方法打开一个页面

这种方法需要构造一个from,然后由js代码触发form的submit,将表单提交到一个新的页面,代码较长,在这里就不写了,大家知道有这种方案就行了。

大家注意,以上两种方法不适合放在ajax的回调函数中,如果放在回调函数中,依然会被浏览器拦截。

3、终极解决方案–先弹出窗口,然后重定向

第三种方案,其实是一种变通方案,核心思想是: 先通过用户点击打开页面,然后再对页面进行重定向。示例代码如下。

        xx.addEventListener('click', function () {
            // 打开页面,此处最好使用提示页面
            var newWin = window.open('loading page');

            ajax().done(function() {
                // 重定向到目标页面
                newWin.location.href = 'target url';
            });
        });

以上方法其实是打开了两个地址,所以建议大家打开第一个地址的时候给出一个类似‘当前页面正在加载中,请稍后。。’的简单提示页,这样可以避免打开两次真正的目标页面,让用户察觉到页面的重定向

更多内容请查看 zakwu的小站

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [window open 浏览器] 推荐:

双面玻璃窗:Twoface Window

- 无辣不欢 - 爱…稀奇~{新鲜:科技:创意:有趣}
来自设计师Junkyung Kim等人的创意,双面玻璃窗(Twoface Window),让玻璃窗绕着窗户的中轴转动开合,于是,当户外天气恶劣时,我们可以将窗户上的花盆转向室内,再不用临时搬来搬去那么麻烦了. 嗯,对园艺爱好者来说,这会是个不错的解决方案. 设计师:Junkyung Kim、Yonggu Do.

在Window平台安装MongoDB

- - BlogJava-首页技术区
本文介绍如何安装在windows 7中安装MongoDB. 注:MongoDB并不像Windows上安装其他软件,只需要下载Zip包并解压,然后配置数据存放目录并启动即可. 从MongoDB官方网站,根据你的平台选择对应的windows的压缩包并解压,本文解压到D:\mongodb\. 注:如果需要在命令行中快速使用MongoDB bin目录下的命令,可以将D:\mongoDB\bin加入到Window环境变量.

【Window 10 IoT - 1】Window 10系统安装(树莓派 Pi2) - 叶帆

- - 博客园_首页
(2)、8G 10速Micro SD卡. (3)、LCD显示器(如果是VGA接口,需要加一个HDMI转VGA模块). (5)、安装Windows 10的PC(需要物理直接安装,不能虚机机方式,本篇文章不是必须). (1)、Windows 10 IoT 树莓派固件(Windows_IoT_Core_RPI2_BUILD.zip).

TFO(tcp fast open)简介

- chenqj - pagefault
原创文章,转载请注明: 转载自pagefault. 本文链接地址: TFO(tcp fast open)简介. 这个是google的几个人提交的一个rfc,是对tcp的一个增强,简而言之就是在3次握手的时候也用来交换数据. 这个东西google内部已经在使用了,不过内核的相关patch还没有开源出来,chrome也支持这个了(client的内核必须支持).

Open API的资源集

- Rossoneri - 博客园-首页原创精华区
现在经常听到和使用到各种开放API,因此笔者对这些进行概要的汇总和整理,希望对有这些需求的有一定的参考价值. 什么是开放平台(Open Platform). 在互联网时代,把网站的服务封装成一系列计算机易识别的数据接口开放出去,供第三方开发者使用,这种行为就叫做Open API,提供开放API的平台本身就被称为开放平台.

惠普宣布Open webOS 1.0

- - Solidot
惠普按计划发布了开源版本WebOS的1.0正式版. Open webOS 1.0源代码已发布在GitHub上. 正式版加入了核心应用程序电子邮件和浏览器,支持 Enyo2. 惠普表示1.0版可移植到新设备上,称未来几个月会继续增强Open webOS,计划中的增强包括Qt5/WebKit2,开源多媒体和音频组件,BlueZ蓝牙堆栈,ConnMan网络管理,优化SysMgr渲染架构.

详解 Too many open files

- - 编程语言 - ITeye博客
 运行在Linux系统上的Java程序可能会出现"Too many open files"的异常情况,且常见于高并发访问文件系统,多线程网络连接等场景.         程序经常访问的文件、socket在Linux中都是文件file,系统需要记录每个当前访问file的name、location、access authority等相关信息,这样的一个实体被称为file entry.

The Open Session In View Anti-Pattern - Vlad Mihalcea

- -
An anti-pattern (or antipattern) is a common response to a recurring problem that is usually ineffective and risks being highly counterproductive.. When using JPA and Hibernate, the Fetching policy can have one of the biggest impacts on application performance, and, as explained in my.

Flink Window基本概念与实现原理

- - SegmentFault 最新的文章
在流处理系统中数据源源不断流入到系统,我们可以逐条处理流入的数据,也可以按一定规则一次处理流中的多条数据. 当处理数据时程序需要知道什么时候开始处理、处理哪些数据. 窗口提供了这样一种依据,决定了数据何时开始处理. Flink内置Window. Flink有3个内置Window. 以事件数量驱动的Count Window.

我的open source專案整理列表

- Charles - 程式設計 遇上 小提琴
HGE以前是一款商用的2D遊戲引擎,後來開源,因為我覺得他的引擎挺簡單好用的,重點是有硬體加速,不像SDL純軟體算圖很慢,所以想說把它移植到Python,於是就用Boost.Python寫了一個專案,完成度大約7~8成,裡面有些比較難處理的部份還沒弄好,但主要功能大多都已經可以使用. Glottony是一個用來分析Python函式庫在PyPi上的相依情況,主要是有一次我安裝TurboGears時遇到其中一個package的伺服器似乎掛掉了,整個進度就因為那個檔案載不了而無法進行,因此我覺得或許這種相依的情況也是選工具時重要的考量,於是就寫了這樣的工具.