handle中存在非同步操作，window.open被瀏覽器阻止的問題

weixin_34127717發表於2017-02-28
非同步瀏覽器

想要window.open不被瀏覽器阻止，需要在事件的處理函式的作用域中呼叫window.open開啟新視窗，比如在使用者click的時候。

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

但是當處理函式(handle)中涉及到非同步操作的時候, 我產生了兩種錯誤的解決想法。一是直接把handle繫結為async函式，大體這樣

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

這樣做忽略了async函式內部已經不屬於handle的作用域，所以不可行，依然會被瀏覽器阻止。意識到這點之後，隨手就改，大體這樣：

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

期望的是通過一個async高階函式，在函式體內進行非同步操作，然後返回一個普通函式作為handle。
馬上就發現自己又想錯了，async函式的返回體是Promise，不是Function，因此並不能作為handle。

<br/> 最後只能放棄使用async函式，換用另一個方案來開啟視窗:

xxx.onClick = ()=>{
    let win = window.open('/'); //在handle的作用域內,先開啟一個window
    oneAsyncOperation().then((url)=>{
        win.location.href = url; //然後在非同步操作的回撥中對前面建立的新window重新設定屬性
    })
}

ps: 上面先建立的window, 一般先開啟一個loading頁面的地址。

相關文章