最近做项目时,遇到的问题
“想通过javascript在浏览器新标签页或新窗口打开一个新的页面,结果被浏览器大大无情给拦截了”
业务需求:前端提交数据到后端,后端返回url,然后在新窗口打开该url。
(前后端数据请求使用异步请求的方式)


自己常用的两种打开新窗口的方式

  1. window.open()
  2. 用a标签的target="_blank"
    在模板中插入一个a标签,然后javascript去触发a链接的click,实现跳转。(该方法在jQuery跟js中有坑...)
//***jQuery***
<a href="http://wuliv.com" id="openNew"></a>
$(function(){
$('#openNew').click()
})
//失败无效 //***jQuery***
<a href="http://wuliv.com" id="openNew">
<span><span>
</a>
$(function(){
$('#openNew span').click()
})
//成功打开新页面 //***javascript***
<a href="http://wuliv.com" id="openNew"></a>
document.getElementById('openNew').click()
//成功打开新页面

  

使用jquery来触发a标签点击跳转时,需在a标签插入一个子标签,然后触发子标签的点击实现a标签的跳转(有点绕)

$("#openNew")得到的是一个jquery的对象,jquery本身对该对象的一些属性进行了封装,所以会导致click失效;而使用js对象 document.getElementById("a") 则不会存在该问题

onclick()也可以触发事件,但是onclick跟click不同;
onclick触发的是方法,而click先触发按钮的点击事件,再触发方法。
如果该对象没有绑定onclick方法则无法被触发,而click没有绑定方法也可以触发。


弹出新窗口失败的原因:

  1. 使用window.open(),但是定义了窗口名,也就是在打开窗口传入name参数,因为window.open只能打开唯一的窗口名为name的窗口页面,如果同名,则无法打开。
    解决方案:window.open()不定义窗口名

  2. 使用了异步请求,通过ajax向服务器请求数据,在请求完成后再打开新窗口。因为异步请求存在延时,浏览器会认为不是用户触发的操作。
    解决方案:
    2.1 ajax请求设置成同步的方式
    如果使用了jQuery中的ajax方法做异步请求,则可以配置 async: false, 使请求方式变为同步。
    2.2 vue2.0采用的axios进行数据请求,axios没有同步请求的设置,都是异步的。
    在axios请求之前先打开一个空白的新窗口
     var newPage = window.open() 打开的空白页上有标题,显示的是“无标题”
     window.open('about:blank')  标题上显示的是'about:blank'
    接着在axios的then回调里写入要打开的url
     window.open('about:blank')

至此解决了浏览器阻止新窗口弹窗问题。
一个小问题,有这么多道道,外面世界太浮躁,还是安心写代码来的舒畅些。

作者:以乐之名
本文原创,有不当的地方欢迎指出。转载请指明出处。

浏览器拦截js打开新窗口的更多相关文章

  1. 浏览器禁止js打开新窗口

    在项目中,有个需求是需要ajax获取新地址,然后去打开该页面地址,这样会被浏览器拦截,可以采取以下方式:1.再ajax请求先前,先创建一个新窗口 var newTab = window.open('' ...

  2. Js打开新窗口拦截问题整理

    一.js打开新窗口,经常被拦截 //js打开新窗口,经常被拦截 //指定本窗口打开,可以使用 window.open('http://www.tianma3798.cn', '_self'); //不 ...

  3. JS打开新窗口防止被浏览器阻止的方法

    这篇文章主要介绍了JS打开新窗口防止被浏览器阻止的方法,分析对比了常用方法与改进方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考. ...

  4. JS打开新窗口防止被浏览器阻止的方法[转]

    本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器 ...

  5. js 打开新窗口方式

    之前的项目,有个功能是下载文件,这里只要在浏览器输入 url 就会下载那个文件了.当时我只是简单得使用 window.open ,但是却会被浏览器进行拦截,要手动开启才行,然后就搜索研究其他方法,就看 ...

  6. js页面跳转 和 js打开新窗口 方法

    js页面跳转 和 js打开新窗口 方法 第一种: 第二种: 第三种: 第四种: 第五种: 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面" ...

  7. js 打开新窗口

    以前老是用window.open方法打开浏览器新窗口,但是有的浏览器会阻止打开新窗口,一劳永逸的方式是通过js伪造a标签请求打开新窗口,代码如下: var atag = document.create ...

  8. 几个主流浏览器 Window.open打开新窗口 、模拟a标签打开新窗口的 表现

    Window.open打开新窗口 1.常用浏览器打开新窗口(正常打开window.open)的的不同表现形式(PC/移动端) 2.Window.open在异步处理中打开(_blank) a标签在异步处 ...

  9. js打开新窗口,js打开居中窗口,js打开自定义窗口

    ================================ ©Copyright 蕃薯耀 2020-01-07 https://www.cnblogs.com/fanshuyao/ var is ...

随机推荐

  1. MapReduce运行流程分析

    研究MapReduce已经有一段时间了.起初是从分析WordCount程序开始,后来开始阅读Hadoop源码,自认为已经看清MapReduce的运行流程.现在把自己的理解贴出来,与大家分享,欢迎纠错. ...

  2. Objc中处理数组越界的一种办法

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) Objc的数组如果在访问时索引非法,则会抛出NSRangeEx ...

  3. Vue 插槽

    插槽的概念: 插槽的关键字slot,默认情况下,组件中的模板会覆盖组件中的原始内容(即自定义标签对内部的内容会不显示),解决办法就是使用插槽. 组件的原始内容: 即在vue实例范围之内,因此可以调用实 ...

  4. 【解决】Server Tomcat v7.0 Server at localhost failed to start.

    Server Tomcat v7.0 Server at localhost failed to start. 出现此原因是因为servlet-name不匹配 修改一致即可

  5. center os

    CentOS.Ubuntu.Debian三个linux比较异同 Center OS 7 安装 $$ center os 安装mysql5.6 Linux学习之Center os网络配置 Cent Os ...

  6. php算法面试案例(转)

    有5个人偷了一堆苹果,准备在第二天分赃.晚上,有一人遛出来,把所有菜果分成5份,但是多了一个,顺手把这个扔给树上的猴了,自己先拿1/5藏了.没想到其他四人也都是这么想的,都如第一个人一样分成5份把多的 ...

  7. sublime 设置侧边栏颜色

    Sublime Text 2 编辑器: Ctrl+` 输入安装代码,安装package control 插件 ctrl+shift+P : Package install 为什么装不上了呢?出现了什么 ...

  8. UVA-1615 Highway (贪心,区间选点)

    题目大意:有一条沿x轴正方向,长为L的高速公路,n个村庄,要求修建最少的公路出口数目,使得每个村庄到出口的距离不大于D. 题目分析:区间选点问题.在x轴上,到每个村庄距离为D的点有两个(超出范围除外) ...

  9. JSON工具类库: alibaba/fastjson 使用记录

    JSON工具类库: alibaba/fastjson 使用记录 一.了解JSON JSON标准规范中文文档: http://www.json.org/json-zh.html 最佳实践:http:// ...

  10. 【CF52C】Circular RMQ(线段树区间加减,区间最值)

    给定一个循环数组a0, a1, a2, …, an-1,现在对他们有两个操作: Inc(le, ri, v):表示区间[le, ri]范围的数值增加v Rmq(le, ri):表示询问区间[le, r ...