博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
window.open浏览器弹出新窗口被拦截—原因分析和解决方案
阅读量:4290 次
发布时间:2019-05-27

本文共 2086 字,大约阅读时间需要 6 分钟。

       最近在做项目的时候碰到了使用window.open被浏览器拦截的情况,在本机实验没问题,到了服务器就被拦截了,火狐有拦截提示,360浏览器拦截提示都没有,虽然在自己的环境可以对页面进行放行,但是对用户来说,不能要求用户都来通过拦截。何况当出现拦截时,很多小白根本不知道发生了啥,不知道在哪里看被拦截的页面,百思不得其解,后来查了一下,各家浏览器支持的不一样。

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

使用了一个可定制弹出窗口的外观、尺寸大小、弹出位置以适应该页面的window.open()方法,代码如下:

 

参数解释: window.open 弹出新窗口的命令; page.html 弹出新窗口的文件名; newwindow 弹出窗口的名字(不是文件名),可用空 ″代替; height=100 窗口高度; top=0 窗口距离屏幕上方的像素值; left=0 窗口距离屏幕左侧的像素值; toolbar=no 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏; resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许; status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

原因分析

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

解决方案:

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,将表单提交到一个新的页面,如:

$("#tijiaos").attr('target', '_blank');        $("#tijiaos").submit();

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

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

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

xx.addEventListener(‘click‘, function () {            // 打开页面,此处最好使用提示页面            var newWin = window.open(‘loading page‘);            ajax().done(function() {                // 重定向到目标页面                newWin.location.href = ‘target url‘;            });        });

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

补充:

JS打开新窗口的2种方式

1.超链接<ahref="http://www.jb51.net" title="脚本之家">Welcome</a>

等效于js代码

window.location.href="http://www.jb51.net";    //在同当前窗口中打开窗口

 

2.超链接<ahref="http://www.jb51.net" title="脚本之家"target="_blank">Welcome</a>

等效于js代码

window.open("http://www.jb51.net");                //在另外新建窗口中打开窗口

3、关闭新窗口:

this.window.opener =null;  

window.close();

转载地址:http://wzqgi.baihongyu.com/

你可能感兴趣的文章
没错!java中private字段也是可以访问D!
查看>>
安卓:文本框TextView/EditText的开源库清单
查看>>
Android中Xposed框架篇---利用Xposed框架实现拦截系统方法
查看>>
腾讯老司机的RecyclerView局部刷新爬坑之路
查看>>
JavaScript null 和 undefined
查看>>
JavaScript 里的splice()与slice()
查看>>
Javascript替代eval方法
查看>>
Android开发UI布局必备基础知识
查看>>
程序员面试以及工作中真实问题汇编!
查看>>
浅谈java中的数学运算
查看>>
用大白话聊聊JavaSE
查看>>
Android 手把手带你玩转自定义相机
查看>>
仿墨迹天气的折线图控件,效果杠杠滴
查看>>
移动端防止被抓包
查看>>
Android异步批量压缩图片
查看>>
仿主流APP功能实现
查看>>
Java读取文件夹大小的6种方法及代码
查看>>
Java多线程中的10个面试要点
查看>>
Java面试经典,小题目大学问
查看>>
《程序员》:携程移动端 UI 界面性能优化实践
查看>>