之前有个需求是输入一些配置,然后点击预览,通过接口保存配置并返回预览页面链接,在新页面中打开链接。后来测试一直说没有新页面打开,我一看,原来是被浏览器拦截了。
原因如下:
浏览器只有在认为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(); }