window.open打开新页面失效解决方案
更新时间：2023年07月19日 09:19:05 作者：MissXu666
这篇文章主要给大家介绍了关于window.open打开新页面失效的解决方案,移动端和PC端全部通过window.open()来跳转页面窗口,文中给出了详细的解决方案,需要的朋友可以参考下
在开发h5项目的时候 经常需要使用window.open 来打开新页面，但有时会出现失效的情况。
问题复现：
在接口请求完成后，根据返回的结果调用window.open 失效
原因：浏览器出于安全的考虑，会拦截掉非用户操作打开的新页面；实际上，在异步的方法中以及非用户操作打开的新页面都会被拦截（不同浏览器不同版本表现不同，不是所有情况都会被拦截，但是任然需要做兼容处理）
例如：
fetch(url,option).then(res=>{
window.open('http://www.test.com')
})
setTimeout(() => {
window.open(this.url, '_blank')
}, 100)
。。。
if (success) window.open(data);解决方案：
1、尽量让将调用window.open的方法 写在用户事件中，例如：
if (success) {
Dialog.alert({
content: '即将跳转单证链接',
onConfirm: () => {
window.open(data);
},
});
}交互上的小修改，这样写需要用户手动确定才会跳转
2、 使用a标签进行跳转
ajax().then(res => {
asyncOpen(res.url)
})
function asyncOpen(url) {
var a = document.createElement('a')
a.setAttribute('href', url)
a.setAttribute("target", "_blank");
a.setAttribute("download", 'name');
document.body.appendChild(a);
a.click();
a.remove();
}3、使用中转页面
一定要把window.open定义在接口请求的外部，保证新开空白窗口不会被拦截。
var newWin = window.open('loading page')
ajax().then(res => {
newWin.location.href = 'target url'
}).catch(() => {
newWin.close()
})补充小知识：window.open下载不打开新窗口
open的第二个参数是 '_self' 即可
window.open(url,'_self');
总结
到此这篇关于window.open打开新页面失效解决方案的文章就介绍到这了,更多相关window.open打开新页面失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Flash图片上传组件 swfupload使用方法及示例，swfupload的使用范围十分的广泛，功能也很强大，今天我们就先来简单的通过范例来学习下。2015-03-03
收集的33个表格排序空间，需要的朋友可以参考下。自从选择。2009-12-12
这篇文章主要给大家介绍了关于JS中数组合并的几种常见方法,在开发的过程中,我们很多时候会遇到需要将两个数组合并成一个数组的情况,文中通过实例代码介绍的非常详细,出现需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了纯js三维数组实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
点击标签切换DIV的效果，在很多地方都有见到过，而且实现的方法有很多，本例介绍的这个可以切换和自动切换DIV选项卡2014-08-08
本文主要对利用js来实现缩略语列表、文献来源链接和快捷键列表的方法进行详细分析介绍。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
innerHTML 属性的使用非常流行，因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很显然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。2008-06-06
这篇文章主要介绍了JS页面获取 session 值，作用域和闭包,结合具体实例形式分析了javascript与jsp交互获取session值、函数作用域及闭包相关操作技巧,需要的朋友可以参考下2019-10-10
按回车键后跳到下一控件的js代码2009-03-03
链表（Linked list）是一种常见的基础数据结构，是一种线性表，但是并不会按线性的顺序存储数据，而是在每一个节点里存到下一个节点的指针(Pointer) 。下面我们用 JavaScript 代码对链表的数据结构进行实现2017-08-08
最新评论