window.open()弹出窗口被拦截

之前有个需求是输入一些配置，然后点击预览，通过接口保存配置并返回预览页面链接，在新页面中打开链接。后来测试一直说没有新页面打开，我一看，原来是被浏览器拦截了。

 

原因如下：

浏览器只有在认为click和submit在打开新窗口时（如果是_self则不会有此限制），这些操作是由用户主动触发时才是安全可以被执行，而ajax回调函数中去执行click和submit被浏览器认为不是由用户主动触发的，因此不能被安全执行，所以被拦截。

 

解决方法：

新打开一个标签页，在请求响应后，改变新标签页的href。

let newWindow = window.open()
this.$http.post(/, query).then(function(response) {
    if (response.body.success == true) {
    newWindow.location.href = this.$api.config.screenUrl + this.id
    }
}

 

在查询解决方法的过程中，我还尝试了新建一个a标签的方式，但是依旧会被拦截。原因应该如上。把创建a标签的办法放上来，可以参考一下。

function newWin(url, id) {  
    var a = document.createElement('a')  
    a.setAttribute('href', url)
    a.setAttribute('target', '_blank')
    a.setAttribute('id', id)
    a.style.visibility = 'hidden'
    // 防止反复添加  
    if(!document.getElementById(id)) {                       
      document.body.appendChild(a) 
    }  
    a.click();  
}