window.open 打开新页面失效

这篇具有很好参考价值的文章主要介绍了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、使用中转页面文章来源地址https://www.toymoban.com/news/detail-509066.html

一定要把window.open定义在接口请求的外部,保证新开空白窗口不会被拦截。
var newWin = window.open('loading page') 
ajax().then(res => {
	newWin.location.href = 'target url'
}).catch(() => {
	newWin.close()
})

到了这里,关于window.open 打开新页面失效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • window.open和vue router新开页面

    目录 系列文章目录 前言 一、window.open 二、vue-router 三、URLSearchParams 四、新页面接收参数 总结 打开新页面,并实现在新开页面中携带参数,可以使用 URLSearchParams 对象,进行参数的拼接和解析,vue router跳转新页面和window.open都可以,几种方式适应于不同场景,URLSearchParams对象

    2024年02月12日
    浏览(28)
  • vue中使用window.open打开assets文件夹下的pdf文件

    需求:系统有个操作手册,点击会在浏览器新开个窗口并打开pdf文件。这个pdf文件存储在本地assets文件夹中。 文件结构: 注:直接使用window.open(文件路径)不能打开,需要在vue.config.js中配置所需文件 引入图中红框中的代码 页面中打开:(我是在初始化的时候就打开文件,没

    2024年02月10日
    浏览(60)
  • 论多窗口相互关联下window.open打开已在的窗口时只激活不刷新的实现方案

    前端博主,热衷各种前端向的骚操作,经常想到哪就写到哪,如果有感兴趣的技术和前端效果可以留言~博主看到后会去代替大家踩坑的~ 主页: oliver尹的主页 格言: 跌倒了爬起来就好~ 来个关注吧,点个赞吧,谢谢 近期,我司有个小伙伴遇到这么个场景实现起来感觉有点

    2024年02月04日
    浏览(58)
  • ChatGPT付费创作系统小程序端开发工具提示打开显示无法打开页面解决办法

    很多会员在上传小程序前端时经常出现首页无法打开的情况,错误提示无法打开该页面,不支持打开,这种问题其实就是权限问题,页面是通过调用web-view访问,说明业务域名有问题,很多都是合法域名加了,但忘了加业务域名导致。 小程序后台小程序类目选择:工具 - 办公

    2024年02月16日
    浏览(59)
  • QT开发笔记之跳转并打开另一个页面

    在我们开始写逻辑之前,首先应该新创建一个页面的文件 a)右键单击项目名出来如下页面,选择Add New… b)选择 Qt 设计师界面类 c)任意选择一个页面,本文选择Widget,一直下一步,点击确定,即可生成新的页面文件。 d)项目下会新生成一个.ui/.cpp/.h文件 首先需要在主界面

    2024年02月05日
    浏览(47)
  • Windows11 安全中心页面不可用问题(无法打开病毒和威胁防护)解决方案汇总(图文介绍版)

    Windows版本 : Windows11 家庭中文版, 版本22H2(OS内部版本 22621.2283) 问题出现原因 :Windows11 重装系统后无法打开Windows安全中心自带的病毒和防威胁设置。 图1、页面不可用 你的IT管理员已限制对此应用的某些区域的访问… 图2、相较于完整Windows 安全中心,无 病毒和威胁防护功能

    2024年02月08日
    浏览(49)
  • 页面禁用鼠标右键,禁用F12打开开发者工具!!!

    今天在浏览博主文章时发现无法复制页面上的内容,也无法 F12 打开开发者工具,更用不了鼠标右键,于是上网找了原因并亲测可用 方法一 将 body 改成

    2024年02月11日
    浏览(75)
  • 小程序 - Taro小程序中打开h5页面链接 - 并解决:无法打开该页面 - 不支持打开 https://www.baidu.com/,请在“小程序右上角更多->反馈与投诉”中和开发者反馈

    Taro 小程序中h5跳转打开页面 借助 webView 组件打开h5页面 @/pages/webView/webView.js 文件 Taro 中 webView 组件 29 行 主要代码 无法打开该页面 - 不支持打开 https://www.baidu.com/,请在“小程序右上角更多-反馈与投诉”中和开发者反馈 解决 - 在微信公众平台 小程序进行业务域名配置 具体

    2024年02月09日
    浏览(41)
  • Vitual Box虚拟机打开后,键盘鼠标失效

    作者在使用Vitual Box虚拟机软件时,偶然发现打开VitualBox后,鼠标和键盘均无法使用。 你以为是“主机热键”引起的?NO! 废话少说 直接上干货: 在VitualBox设置下有一个【USB设备】,当开启后默认会对USB端口通讯进行改变,从而引起键盘、鼠标均无法使用。 解决方法 : 取消

    2024年04月14日
    浏览(35)
  • Linux文件打开函数open()

    把上边的内容保存在 openexam.c 里边,然后使用 gcc openexam.c -o openexam 进行编译,然后 ./openexam 进行执行,发现输出“ -1 ”。 此文章为5月Day 14学习笔记,内容来源于极客时间《网络编程实战》。

    2024年02月04日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包