浏览器拦截js打开新窗口

Posted 2020-10-10 @ 以乐之名

最近做项目时，遇到的问题
“想通过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‘) 

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

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