问题:同一个项目,同一个浏览器,不同模块,相同的代码(同是window.open()),为何一个直接打开,另一个直接被拦截?

原因:查资料发现为浏览器的广告拦截功能导致。

补充

1、一般情况下,js中用window.open()新开一个tab页面,浏览器会进行拦截,认为打开的是一个广告页;

2、若将此执行放在用户点击时触发,浏览器会认为是用户想访问这个网页,而并不是你主动弹出给用户;

3、用户点击时触发的函数中,若有多个window.open(),第一个不会被拦截,后面其他的会被拦截;

4、用户点击触发的函数中,若有异步请求,而window.open()放在异步请求的回调函数中,也会被拦截;

解决方法

宗旨——>将其伪装为用户触发的操作

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

3.先弹出窗口,再重定向到目标页面

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

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

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

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

扩展

S打开新窗口的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();

window.open()新开网页被拦截的更多相关文章

  1. 解决java新开页面被拦截的问题

    在开发中遇到from表单利用 target="_blank" 属性新开页面时被拦截. 用ajax让form表单提交,这时有可能浏览器会拦截新开页面,这时只 需要设置 ajax 同步 ...

  2. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  3. window.open新打开窗口与新开标签页

    最近在使用window.open时忽略了一个细节问题:window.open新打开一个窗口,但是有时却是新打开一个窗口有时打开一个新标签页.虽然对一般的需求来说,这个两种情况都无所谓,但是对于那种有强 ...

  4. ajax回调打开新窗体防止浏览器拦截有效方法

    ajax回调打开新窗体防止浏览器拦截,就这么做! 问题剖析:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function click_fun(){    window ...

  5. webdriver高级应用- 浏览器中新开标签页(Tab)

    #encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...

  6. WIN7只能上QQ打不开网页,使用CMD输入netsh winsock reset

    此类问题可以用腾讯电脑管家电脑诊所一键修复,请点击上方的[立即修复]即可. 附:手动修复步骤(来源:腾讯电脑管家电脑诊所,自动修复请点击上方的[立即修复])方案一:手动设置DNS(说明:如果您使用DN ...

  7. 从实验室搬到宿舍后可以上QQ但打不开网页

    如果你是属于如标题这种情况:也就是从实验室换到宿舍或者从宿舍换到实验室,在之前的地方可以上网,但换了地方后就出现只能上QQ而不能打开网页的情况.此时,首先考虑DNS配置,很有可能是因为你搬到了宿舍,但 ...

  8. WebView重定向新开界面问题-b

    首先介绍下这个问题,iOS上WebView 如果想更贴近native,就要加载新URL的时候新开个界面,但是如果加载的链接有重定向的话,就会在中间开一个空白的界面,这个好烦.然后就是解决这个问题,采用 ...

  9. 其它网页可以上网,IE浏览器打不开网页的解决办法

    下面是自己引用别人的,作为自己的备注 昨天由于安装了多款软件,今天开机发现IE浏览器打不开了,废了些周折终于,修复了IE浏览器,现将ie浏览器打不开网页的经验分享给大家,希望此经验对于出现过此类情况的 ...

随机推荐

  1. CNN中feature map、卷积核、卷积核个数、filter、channel的概念解释,以及CNN 学习过程中卷积核更新的理解

    具体可以看这篇文章,写的很详细.https://blog.csdn.net/xys430381_1/article/details/82529397

  2. Hbase--知识点总结3

    Hbase知识点总结:  hbase表中为什么列族的数量不能太多? 因为当一个列族数据溢写的时候,其他列族也会发生数据溢写,但是其他列族中数据的数量还没有达到溢写的阈值,就会导致产生的小文件数量增多. ...

  3. Redis安装教程及可视化工具RedisDesktopManager下载安装

    Redis安装教程: 1. Windows下安装教程: 下载:https://github.com/MSOpenTech/redis/releases Redis 支持 32 位和 64 位.这个需要 ...

  4. Python学习—数据库篇之索引

    一.索引简介 索引,是数据库中专门用于帮助用户快速查询数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置,然后直接获取即可,对于索引,会保存在额外的文件中.在mys ...

  5. C/C++字符串使用整理

    在C语言中,字符串有多种操作与处理方法.话不多说,下面就整理一下C语言中字符串的使用整理. 1.头文件 字符串的头文件: #include<cstring> 2.输入 通常,字符串有多种输 ...

  6. vue 配置了全局的http拦截器,单独某个组件不需要这个拦截器,如何设置

    之前写过关于全局配置http拦截器的随笔,现在有个需求,在微信支付时,生成二维码,页面显示一个遮罩层,二维码页面需要每两秒请求一次接口,若返回结果为已支付,则进行页面跳转,但因为全局http中load ...

  7. pytho命名规范

    1变量小写 多个单词  下划线 2 常量 全大写 3

  8. docker-compose使用

    1.创建app.py项目文件,执行以下代码 import time import redis from flask import Flask app = Flask(__name__) cache = ...

  9. Ztree的onClick和onCheck事件

    如下图所示,点击框选中,再点击框取消.现在需加上点击字体也能选中,再点击则取消 思路:点击事件是onClick,勾选的回调函数为onCheck,要实现上面需求,我们只需要在callback里新增一个点 ...

  10. IDEA 开发环境中设置Subversion,遇到svn安装路径包含空格无法使用版本控制的解决办法

    假如你的svn.exe的安装位置是:C:\Program Files\TortoiseSVN\bin\svn.exe,路径中包含空格. 1.File->Settings->Version ...