今天寫代碼遇到了window.open被瀏覽器阻攔的問題, 需求是發(fā)送一個ajax請求, 應答的對象里有value屬性如果不為空, 就根據這個value的信息保存sessionStorage, 然后根據sessionStorage打開一個新頁面, 顯示商品詳情頁, 如果value屬性為空, 就不打開新窗口, 在原窗口顯示一下已有的基本信息.
經過試坑, 完成不了需求. 放棄了....試坑過程總結一下.
嘗試失敗的方法
angular的$watch服務
由于屏蔽原因可能是我在ajax回調里使用了window.open(), 所以思路是把window.open拿出來不放在回調里, 所以設置了個變量用于查看狀態(tài)$scope.aaa, 在回調里改變值, 然后$scope.$watch監(jiān)控變量, 然后調用window.open().
經過嘗試這種方法還會被屏蔽.
失敗
定時器方法
在回調里用了setTimeout, 再打開window.open(), 還被屏蔽.
失敗
新建a標簽, 使用a.click方法
function newWin(url) {
var a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('style', 'display:none');
a.setAttribute('target', '_blank');
document.body.appendChild(a);
a.click();
a.parentNode.removeChild(a);
}
不好使, 失敗~
可能有用的方法
window.open 打開頁面被瀏覽器阻擋的問題
(懶得試了, 即使好用也滿足不了我的需求)
由于比較新的瀏覽器都加了一個機制棚放，就是window.open不能夠異步加載构舟，也就是說矮烹，你用ajax請求了某個接口以后再去window.open一個新的頁面亩码，它很大可能被瀏覽器阻擋了，除非你調整了瀏覽器的機制。
那么有沒有好的方法進行解決這個問題呢模闲？
有的人說用window.location.href來跳轉，這個在PC端可以崭捍，但是也是有一個問題就是會覆蓋當前的頁面尸折。而且移動端，如果是打開doc或者pdf文件殷蛇，Safari或者其它的一些瀏覽器還是會不跳轉实夹。
那么我們還是要回到window.open來進行方案布局了。
由于瀏覽器需要用戶操作后才能夠跳轉粒梦，那么我們就在用戶click或者touch等事件后直接調用一下window.open亮航，至于第一個參數你傳什么都沒有所謂，如果要美觀谍倦，可以傳一個自己寫好的loading頁面塞赂，可以理解成為一個中轉頁面泪勒。
當你的url生成完昼蛀，也就是異步回調后拿到了需要跳轉的url，再去替換圆存。
偽代碼如下：
downloadProtocolInterFace(id) {
let open = window.open('../download');//打開另一個頁面被攔截的問題和window.location.href
//下載協(xié)議叼旋，設計方案需要而錄入方案無
this.load = loading(this, "下載協(xié)議中...");
let data = {
plan_item_id: id //方案授予ID
};
approver
.downloadProtocol(data)
.then(res => {
if (res.retCode === 0) {
if(!open) {
window.location.href = res.data.file_path;
}else {
open.location = res.data.file_path;
}
} else {
this.errorShow(this.approverErrorData);
}
this.load && this.load.close();
})
.catch(err => {
this.load && this.load.close();
if (err && err.data && err.data.errMsg) {
this.$message.error(err.data.errMsg);
this.reload();
}
});
},
作者：諸葛韓信
來源：CSDN
原文：https://blog.csdn.net/qq_31968791/article/details/93979310
版權聲明：本文為博主原創(chuàng)文章，轉載請附上博文鏈接沦辙！
