handle中存在異步操做,window.open被瀏覽器阻止的問題

想要window.open不被瀏覽器阻止,須要在事件的處理函數的做用域中調用window.open打開新窗口,好比在用戶click的時候。瀏覽器

xxx.onClick = ()=>{
    window.open('/');
}

可是當處理函數(handle)中涉及到異步操做的時候, 我產生了兩種錯誤的解決想法。一是直接把handle綁定爲async函數,大致這樣異步

xxx.onClick = async()=>{
    let url = await oneAsyncOperation;
    window.open(url);
}

這樣作忽略了async函數內部已經不屬於handle的做用域,因此不可行,依然會被瀏覽器阻止。意識到這點以後,隨手就改,大致這樣:async

let handleGenerator = async()=>{
    let url = await oneAsyncOperation;
    return ()=>{
        window.open(url);    
    }
}
xxx.onClick = handleGenerator();

指望的是經過一個async高階函數,在函數體內進行異步操做,而後返回一個普通函數做爲handle。
立刻就發現本身又想錯了,async函數的返回體是Promise,不是Function,所以並不能做爲handle。函數

<br/> 最後只能放棄使用async函數,換用另外一個方案來打開窗口:url

xxx.onClick = ()=>{
    let win = window.open('/'); //在handle的做用域內,先打開一個window
    oneAsyncOperation().then((url)=>{
        win.location.href = url; //而後在異步操做的回調中對前面建立的新window從新設置屬性
    })
}

ps: 上面先建立的window, 通常先打開一個loading頁面的地址。code

相關文章
相關標籤/搜索