乐趣区

关于javascript:js实现避免浏览器拦截弹出新页面的方法

jiezi

“想通过 javascript 在浏览器新标签页或新窗口关上一个新的页面，后果被浏览器大大有情给拦挡了”
业务需要：前端提交数据到后端，后端返回 url，而后在新窗口关上该 url。
（前后端数据申请应用异步申请的形式）

本人罕用的两种关上新窗口的形式

window.open()
用 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 没有绑定办法也能够触发。

弹出新窗口失败的起因：

应用 window.open()，然而定义了窗口名，也就是在关上窗口传入 name 参数，因为 window.open 只能关上惟一的窗口名为 name 的窗口页面，如果同名，则无奈关上。
解决方案：window.open()不定义窗口名

应用了异步申请，通过 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’)

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

退出移动版