window.open打開新頁面失效解決方案
更新時間：2023年07月19日 09:19:05 作者：MissXu666
這篇文章主要給大家介紹了關(guān)于window.open打開新頁面失效的解決方案,移動端和PC端全部通過window.open()來跳轉(zhuǎn)頁面窗口,文中給出了詳細的解決方案,需要的朋友可以參考下
在開發(fā)h5項目的時候 經(jīng)常需要使用window.open 來打開新頁面，但有時會出現(xiàn)失效的情況。
問題復現(xiàn)：
在接口請求完成后，根據(jù)返回的結(jié)果調(diào)用window.open 失效
原因：瀏覽器出于安全的考慮，會攔截掉非用戶操作打開的新頁面；實際上，在異步的方法中以及非用戶操作打開的新頁面都會被攔截（不同瀏覽器不同版本表現(xiàn)不同，不是所有情況都會被攔截，但是任然需要做兼容處理）
例如：
fetch(url,option).then(res=>{
window.open('http://www.test.com')
})
setTimeout(() => {
window.open(this.url, '_blank')
}, 100)
。。。
if (success) window.open(data);解決方案：
1、盡量讓將調(diào)用window.open的方法 寫在用戶事件中，例如：
if (success) {
Dialog.alert({
content: '即將跳轉(zhuǎn)單證鏈接',
onConfirm: () => {
window.open(data);
},
});
}交互上的小修改，這樣寫需要用戶手動確定才會跳轉(zhuǎn)
2、 使用a標簽進行跳轉(zhuǎn)
ajax().then(res => {
asyncOpen(res.url)
})
function asyncOpen(url) {
var a = document.createElement('a')
a.setAttribute('href', url)
a.setAttribute("target", "_blank");
a.setAttribute("download", 'name');
document.body.appendChild(a);
a.click();
a.remove();
}3、使用中轉(zhuǎn)頁面
一定要把window.open定義在接口請求的外部，保證新開空白窗口不會被攔截。
var newWin = window.open('loading page')
ajax().then(res => {
newWin.location.href = 'target url'
}).catch(() => {
newWin.close()
})補充小知識：window.open下載不打開新窗口
open的第二個參數(shù)是 '_self' 即可
window.open(url,'_self');
總結(jié)
到此這篇關(guān)于window.open打開新頁面失效解決方案的文章就介紹到這了,更多相關(guān)window.open打開新頁面失效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
小程序開發(fā)實現(xiàn)access_token統(tǒng)一管理
本文主要介紹了小程序開發(fā)實現(xiàn)access_token統(tǒng)一管理，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2021-07-07
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)圖片選擇并預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細介紹了微信小程序獲取手機驗證碼的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
Arrays(數(shù)組) 數(shù)組是一個固定長度的存儲相同數(shù)據(jù)類型的數(shù)據(jù)結(jié)構(gòu),數(shù)組中的元素被存儲在一段連續(xù)的內(nèi)存空間中,下面這篇文章主要給大家介紹了關(guān)于JavaScript第一個分水嶺之數(shù)組的基本操作,需要的朋友可以參考下2022-04-04
JSON.stringify轉(zhuǎn)換JSON時日期時間不準確的解決方法
這篇文章主要介紹了JSON.stringify轉(zhuǎn)換JSON時日期時間不準確的解決方法,即JSON數(shù)據(jù)中包含日期對象時,在轉(zhuǎn)換時會轉(zhuǎn)換成國際時間,而不是中國的時區(qū),需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細介紹了微信小程序自定義底部導航，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
JavaScript的for循環(huán)中嵌套一個點擊事件的問題解決
本文主要介紹了JavaScript的for循環(huán)中嵌套一個點擊事件點擊一次彈出多個相同的值的解決方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了基于JS分頁控件實現(xiàn)簡單美觀仿淘寶分頁按鈕效果的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了微信小程序仿抖音短視頻切換效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過文字說明加示例代碼的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10