解決方案:
1. 使用a標(biāo)簽替代
給出如下函數(shù),將此函數(shù)綁定到click的事件回調(diào)中,就可以避免大部分瀏覽器對(duì)窗口彈出的攔截剥懒。
newLink(url) {
let a = document.createElement(‘a(chǎn)‘);
a.setAttribute(‘href‘, url);
a.setAttribute(‘target‘, ‘_blank‘);
}
2. 使用form的submit方法打開(kāi)一個(gè)頁(yè)面
這種方法需要構(gòu)造一個(gè)from沐飘,然后由js代碼觸發(fā)form的submit,將表單提交到一個(gè)新的頁(yè)面雹姊,
如果需要傳遞參數(shù)時(shí)股缸,需要使用 POST 方法, 默認(rèn)的 GET 方法無(wú)法傳遞參數(shù)吱雏。也就是新頁(yè)面的url中沒(méi)有參數(shù)部分敦姻。如:
newLink(url){
let form = document.createElement('form');
form.action = 'www.baidu.com?id=1';
form.target = '_blank';
form.method = 'POST';
document.body.appendChild(form);
form.submit();
}
3、終極解決方案–先彈出窗口歧杏,然后重定向
第三種方案镰惦,其實(shí)是一種變通方案,核心思想是:先通過(guò)用戶點(diǎn)擊打開(kāi)頁(yè)面犬绒,然后再對(duì)頁(yè)面進(jìn)行重定向旺入。示例代碼如下:
newLink(url){
// 打開(kāi)頁(yè)面,此處最好使用提示頁(yè)面
let newLink = window.open(‘loading page‘);
axios.get(url)
.then(function (response) {
newLink.location.href = url;;
})
.catch(function (error) {
console.log(error);
})
}