handle中存在异步操作，window.open被浏览器阻止的问题

iliyaku 发布于2019-08-21 15:17 / 1920人阅读

摘要：想要不被浏览器阻止，需要在事件的处理函数的作用域中调用打开新窗口，比如在用户的时候。一是直接把绑定为函数，大体这样这样做忽略了函数内部已经不属于的作用域，所以不可行，依然会被浏览器阻止。

想要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。

最后只能放弃使用async函数，换用另一个方案来打开窗口:

xxx.onClick = ()=>{
    let win = window.open("/"); //在handle的作用域内,先打开一个window
    oneAsyncOperation().then((url)=>{
        win.location.href = url; //然后在异步操作的回调中对前面创建的新window重新设置属性
    })
}

ps: 上面先创建的window, 一般先打开一个loading页面的地址。

GPU云服务器云服务器 window open 云计算存在的问题互联网医疗存在的问题此网站的安全证书存在问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88143.html

作为window对象属性的元素多窗口和窗体

摘要：作为对象属性的文档元素如果文档中用属性为元素命名。其就是交互窗口中的每个窗口窗体都是的执行上下文。以对象作为全局对象，这样的话，一个窗口窗体中的代码可以应用到其他窗口或者窗体并且同源策略没有进行阻止。作为window对象属性的文档元素如果html文档中用id属性为元素命名。并且如果 window对象没有此名字的属性，则window对象会赋予一个属性，其名字为id属性的值，其值指向该...

fredshare 2019-08-23 10:41 评论0 收藏0
window.open被浏览器拦截的解决方案

摘要：原因分析深入研究当浏览器检测到非用户操作产生的新弹出窗口，则会对其进行阻止。但是，被浏览器拦截我们代码中要弹出的窗口并不是程序员所希望的。现象最近在做项目的时候碰到了使用window.open被浏览器拦截的情况，搞得人无比郁闷啊，虽然在自己的环境可以对页面进行放行，但是对用户来说，不能要求用户都来通过拦截。何况当出现拦截时，很多小白根本不知道发生了啥，不知道在哪里看被拦截的页面，简...

rickchen 2019-08-02 15:33 评论0 收藏0
JavaScript BOM——“window 对象”的注意要点

摘要：仅限数值表示新窗口的高度。一个字符串参数，并将其显示给用户，提供两个按钮，一个按钮返回布尔值另一个按钮返回布尔值。全局作用域 window 在是BOM 的核心对象，他是浏览器的一个实例。在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。如： var age = 18; function sayAge(){ console.log(window.age);...

levius 2019-08-19 17:08 评论0 收藏0
web安全一，同源策略与跨域

摘要：可以说同源策略在安全中扮演着及其重要的角色。我把这个领域的东西写成了一个系列，以后还会继续完善下去安全一同源策略与跨域安全二攻击安全三攻击之所以要将同源策略与跨域写在一起，是因为存在浏览器的同源策略，才会存在跨域问题何为同源策略同源策略是浏览器实现的一种安全策略，它限制了不同源之间的文档和脚本交互的权限。只有同一个源的脚本才会具有操作dom、读写cookie、session 、a...

cgspine 2019-08-22 14:56 评论0 收藏0
js基础知识笔记

摘要：常见内存泄漏情形全局变量被忘记的或者闭包引用闭包概念有权访问另一个函数作用域的变量的函数。会话存储刷新页面依旧存在，与在持久上不同外，其余一致。请求向指定的资源提交被处理的数据，数据量和类型没限制，不主动缓存，页面刷新数据会被重新提交。 defer 脚本延迟执行，适用于外部脚本文件async 立即下载，不保证顺序（建议不修改DOM，避免重绘） CDN加速 (Content De...

李文鹏 2019-08-23 12:13 评论0 收藏0