為什么要做這個(gè)東西

最近做一個(gè)需求，前端請求一個(gè)接口，后臺(tái)生成文件以后返回文件名，前端再通過window.open下載這個(gè)文件。發(fā)現(xiàn)window.open有時(shí)生效有時(shí)不生效，后來查閱資料后發(fā)現(xiàn)瀏覽器出安全方面的考量，會(huì)把用戶操作完頁面后一段時(shí)間內(nèi)的window.open視為非法操作屏蔽掉，這個(gè)時(shí)間后來經(jīng)過測試大概是五秒；如果接口請求比較耗時(shí)就會(huì)導(dǎo)致open被屏蔽。這里封裝一個(gè)函數(shù)，用戶操作完頁面4.5秒后請求沒有完成時(shí)先執(zhí)行window.open，接口請求完成后替換新窗口的url完成文件下載。如果在4.5秒內(nèi)請求完成了就直接執(zhí)行window.open

代碼

function asyncOpenWindow(promise) {let newWindow = null;const timeOut = setTimeout(() => {try {if (navigator.userAgent.indexOf('Chrome') > -1) {newWindow = window.open('', '', 'width=500,height=100,location=no,menubar=no');}} catch (e) {console.log(e);}}, 4500);promise.then((url) => {clearTimeout(timeOut);if (newWindow) {newWindow.location.href = url;} else {window.open(url);}}); }

使用

const fn =asncy function(){ const url =await requset return url } asyncOpenWindow(fn())

總結(jié)

以上是生活随笔為你收集整理的window.open无法打开新窗口的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。