window.open()新开浏览器窗口被拦截处理

打开新窗口方式：

1.页面标签跳转

<a href="#" target="_blank">新页面</a>复制代码

2.js跳转

window.open('#')复制代码

遇到的问题：

window.open( )在正常的点击事件中可以正常使用，但是在接口请求完成后调用会被浏览器默认拦截。

// 正常跳转
function newWindow(){    window.open('http://www.test.com')
}复制代码

// 被拦截示例
fetch(url,option).then(res=>{    window.open('http://www.test.com')
})复制代码

尝试方法：

先打开一个空的窗口，然后再给新窗口赋值跳转链接。

//尝试的方法，被拦截
fetch(url,option).then(res=>{    let newWindow = window.open(' ', '_blank')   newWindow.location.href='http://www.test.com/?name=' + res.name
})复制代码

仍然会被拦截，并且浏览器报错winHandler为undefined。

解决方法：

把newWindow定义在接口请求的外部，保证新开空白窗口不会被拦截。

//正常跳转，不会被拦截
let newWindow = window.open(' ', '_blank')
fetch(url,option).then(res=>{   newWindow.location.href='http://www.test.com/?name=' + res.name
})复制代码

最终优化：

新打开一个空白窗口，等到之前页面接口返回结果时新页面才会打

开对应链接，这中间会有不定时间的空白期，体验不好。

可以给新开的空白页面赋值一个携带loading标识的链接，让新页

面处于加载中状态。待接口返回数据后再重新更改链接。

//正常跳转，不会被拦截，添加loading标识
let newWindow = window.open('http://www.test.com/#loading ', '_blank')fetch(url,option).then(res=>{   newWindow.location.href='http://www.test.com/?name=' + res.name
})复制代码

//新页面通过hash接收loading标识
render () {    if (window.location.hash === '#loading') {      return <Spin tip='Loading...' style={{margin: '100px auto', display: 'block'}} />    } else {      return (        <Index />      )    }
}复制代码

window.open()新开浏览器窗口被拦截处理相关推荐

html新开浏览器窗口,如何在当前浏览器窗口（html）中显示新窗口？
我正在尝试创建一个嵌入式这是我需要做的: 显示在用于打开cover.htm文件浏览器窗口中form.htm文件. (提示:使用"opener"关键字引用主浏览器窗口,并使用loc ...
Web: 使用Javascript新开一个浏览器标签而不是新开一个窗口
很多浏览器对新开弹出窗口进行了限制,popup窗口在默认情况下会被block掉. 这样可能会造成按钮/链接/脚本不工作的假象. window.open("http:www.techbrood ...
软件测试面试题：在一个页面上，点击一个链接之后不会在当前页面上打开此链接而是新开一个窗口打开此页面。
在一个页面上,点击一个链接之后不会在当前页面上打开此链接而是新开一个窗口打开此页面. Selenium也提供了对应的API来处理.简述这个查找新窗口的过程.参考答案:1)首先需要了解下,每个窗口都是有 ...
如何通过 js 打开一个新的浏览器窗口
Aphorism Grow In Errors! 前言最近肾七电池不耐用了, 想想左腹就隐隐作痛, 咳咳 ,回归正题, 我就联系了下 apple 客服,准备换个电池,2018年 12.31 ...
window.open新开页时页面访问不了问题
window.open新开页时页面访问不了问题当项目中需要新开页跳转到其他网站时,最常用的方法就是使用window.open(url)来实现,最近在项目中,使用window.open()方法新开页跳 ...
python selenium：不新开浏览器，而是在已开的浏览器进行操作
python selenium:不新开浏览器,而是在已开的浏览器进行操作 Mac :http://www.manongjc.com/detail/27-htmfglaegusjdpx.html win ...
angular js 打开新的浏览器窗口
1.带参数打开新窗口 const newPath = location.origin + '/list' + '?name=' + name + '&sex=' + sex ; const w ...
SAP C4C url Mashup的跳转工作原理 - 新的浏览器窗口是如何打开的
一个例子: 我在SalesLead TI页面的这个tab里配置了一个url Mashup,点击之后会跳转到bing的页面: 然而从Chrome开发者工具的Elements标签页里并未看到target ...
使用js直接下载pdf文件而不用在新的浏览器窗口打开
最近接了一个需求,要求用户点击下载按钮后直接下载pdf文件,而不是打开一个新窗口,让用户再去手动保存. 接到需求后我立刻着手在网上查找文档,发现很多声称可以实现直接下载的方法都不行,只有下面这个方法成 ...