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

相关文章
相关标签/搜索