本文介绍: 原因:浏览器出于安全的考虑,会拦截掉非用户操作打开新页面;实际上,在异步方法中以及非用户操作打开新页面都会被拦截(不同浏览器不同版本表现不同,不是所有情况都会被拦截,但是任然需要兼容处理)在开发h5项目的时候 经常需要使用window.open打开页面,但有时会出现失效的情况。在接口请求完成后,根据返回结果调用window.open 失效。交互上的小修改,这样写需要用户手动确定才会跳转。2、 使用a标签进行跳转

开发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()
})

原文地址:https://blog.csdn.net/MissXu666/article/details/129210313

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_9371.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注