关于window.open 被浏览器拦截解决方案

分析原因

当浏览器检测到非用户操作产生的新弹出窗口时,会对其进行阻止,因为浏览器认为这可能是广告,不是用户期望的页面。

注意: 如果 window.open 是在用户触发事件(如点击事件)或页面加载时调用,则不会被拦截;而一旦将弹出代码放入 Ajax 回调或异步代码中,可能就会被拦截。

例如:

async function handleJump() {let url = await getData();// 5 秒后if (url) {window.open(url, '_blank');}
}

在这种情况下,可能会被浏览器拦截,导致不必要的问题发生。

解决方案

1. 绑定 window.open 到点击事件

将打开新窗口的代码绑定到 click 事件回调中,这样可以避免大多数浏览器对弹窗的拦截。

示例:

// 获取按钮元素
var button = document.getElementById('openWindowBtn');// 添加点击事件监听器
button.addEventListener('click', function () {// 在点击事件中打开新窗口var newWindow = window.open('https://www.example.com', 'newWindow', 'width=800,height=600');// 检查窗口是否成功打开if (newWindow) {console.log('新窗口已成功打开');} else {console.log('未能打开新窗口,可能被浏览器拦截');}
});

这种方式有效,但有局限性。在处理异步操作时,无法避免拦截问题,因此需要其他解决方案。

2. 先打开空白窗口,后填充 URL

在处理异步操作时,可以先打开一个空白窗口,待异步请求返回后,再填充 URL。

// 先打开新的空白窗口
const newWindow = window.open('about:blank', '_blank');// 设置新窗口标题
newWindow.document.title = '正在跳转...';
newWindow.document.write('加载中...');try {// 异步请求返回后填充 URLnewWindow.location.href = await getUrl();
} catch (error) {newWindow.close();alert('打开新窗口失败');
}

此方案的体验不太好,因为在异步请求期间,新窗口会显示空白页,用户可能会感到困惑,交互体验不佳。

3. 最优解决方案

通过分析,我们知道浏览器会在一定时间后阻止弹窗。因此,更多的从业务逻辑入手是解决问题的关键。

3.1 改为提示用户手动跳转

当异步请求返回 URL 时,不是直接调用 window.open,而是弹出一个提示框,要求用户手动点击跳转按钮,从而规避浏览器的安全策略。

示例:

function openModal(url) {// 包含打开弹窗事件,以及一个确认或取消按钮// 点击“确认”按钮时调用 window.open(url, '_blank');// 点击“取消”按钮时关闭弹窗
}async function handleJump() {let url = await getData();// 异步操作完成后弹出提示框openModal(url);
}
3.2 提示用户当窗口被拦截

window.open() 会返回一个 Window 对象的引用,如果窗口被拦截,则返回 null,利用这一特性可以给出提示信息。

示例:

const newWindow = window.open('https://www.mozilla.org/', '_blank');if (!newWindow) {alert('页面跳转已被浏览器拦截');
}

此方法可以提供简单的提示,也可以结合 UI 框架,给用户提供更友好的交互体验。

3.3 兜底策略

如果不想增加复杂的交互逻辑或改变流程,同时又想保证业务正常实现,可以使用兜底策略。

示例:

const newWindow = window.open(redirectUrl, '_blank');if (newWindow) {// 如果窗口成功打开,确保新窗口获得焦点newWindow.focus();
} else {// 如果窗口被拦截,则直接在当前页面跳转window.location.href = redirectUrl;
}

总结

  • 直接绑定 window.open 到用户事件回调 是最简单的方式,但局限性较大,无法适应复杂的异步场景。
  • 先打开空白窗口后填充 URL 可以解决拦截问题,但用户体验不佳。
  • 最优方案 是通过提示用户手动跳转或检测 window.open 的返回值并提供兜底策略,从而确保用户体验和业务逻辑的完整性。


链接:https://juejin.cn/post/7414305106825019402
 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/65504.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

并发编程-AQS

AQS 什么是AQS java.util.concurrent包中的大多数同步器实现都是围绕着共同的基础行为,比如等待队列、条件队列、独占获取、共享获取等,而这些行为的抽象就是基于AbstractQueuedSynchronizer(简称AQS)实现的,AQS是一个同步框架,可以用来实现…

Prompt提示工程上手指南(七)Prompt编写实战-基于智能客服问答系统下的Prompt编写

前言 本系列文章从最初的基础原理与入门实践切入,一直延伸到主流策略、引导策略、RAG(检索增强生成)、思维树(ToT)与避免幻觉(Hallucination)的策略这种渐进的结构方便了对初学者和进阶者的双向…

mac系统vsCode中使用Better Comments在.vue文件里失效

问题:关于Better Comments默认在html、TS、JS中有效,在vue中无效,需要单独进行配置 windows系统可以参考友链Better Comments(注释高亮)在vue文件里失效的问题 关于Better Comments电脑的配置路径: Windows系统&…

探索 JavaBean(实体类)的奇妙世界

目录 一、啥是 JavaBean(实体类) (一)定义与特点 (二)为啥要用 JavaBean 二、动手写一个 JavaBean(实体类) (一)创建一个简单的用户 JavaBean &#xf…

mac中idea中英文版本切换

1.快捷键command,或者 2.找到插件(plugins),搜索chinese,安装 第一次安装好点击应用会提示重启,直接重启就好了,如果已经安装过,只需要切换中英文 3.中英文切换 外观与行为&#xf…

单片机库函数-io输出操作

1、需要使用模块 使用库函数做跑马灯,要用到: misc.h misc.c 时钟模块: stm32f10x_rcc.h stm32f10x_rcc.c gpio模块: 头文件:stm32f10x_gpio.h 源文件:stm32f10x_gpio.c 2、库函数 2.1、初始化GPIO void GPIO_Init(GPIO_TypeDef* …

贝叶斯神经网络(Bayesian Neural Network)

最近在研究贝叶斯神经网络,一些概念一直搞不清楚,这里整理一下相关内容,方便以后查阅。 贝叶斯神经网络(Bayesian Neural Network) 贝叶斯神经网络(Bayesian Neural Network)1. BNN 的核心思想2. BNN 的优化目标3. BNN 的结构与特点4. BNN 的训练过程5. BNN 的优缺点6. …

预计5.2.1版本的SharedingSphere Hint指定数据库未生效问题

配置文件展示 shardingsphere:props:sql-show: falsedatasource:names:datacenter1,datacenter2,datacenter3rules:sharding:tables:shape:actual-data-nodes: datacenter$->{1..3}.shape$->{0..7}key-generate-strategy:column: idkey-generator-name: snowflaketable-s…

【Spring】基于注解的Spring容器配置——@Scope注解

在使用Spring框架时,理解Bean的作用域(Scope)是非常重要的。Bean的作用域决定了Spring容器如何创建和管理Bean的生命周期。正确地使用作用域可以提高应用的性能和资源利用率,同时也能确保应用的正确性。 在大型企业级应用中&…

关于Promise的小测验

关于Promise的小测验 题目 // 编码挑战 #1 /* 在这个挑战中,你将构建一个函数 ‘whereAmI’,该函数仅基于 GPS 坐标显示国家信息。为此,你将使用第二个 API 来对坐标进行地理编码。 以下是你的任务: 第一部分 创建一个函数 ‘whe…

“邂逅”良渚遗址 “巧造”苏绣非遗 《牧神记》焕新有“玄机”

由bilibili与玄机科技联合出品的动画番剧《牧神记》自10月27日上线以来,累计收获了1.2亿播放量、超150万用户追番,B站评分9.7分,多次入选豆瓣口碑华语剧集周榜的动画冠军。放眼今年的国产新番,成绩相当可观。巧妙融合诸多传统元素…

AI文献阅读ChatDOC 、ChatPDF 哪个好?

作为AI产品的深度使用者,基本每天都在使用AI。AI诞生后仿佛给所有的产品打开了新世界大门。当然AI在文献阅读方面自然也不会缺席。 先来简单对比一下ChatDOC vs ChatPDF 从表格里可以看到ChatDOC与ChatPDF都是基于GPT的产品,但在功能上ChatDOC还是比Chat…

Flutter DragTarget拖拽控件详解

文章目录 1. DragTarget 控件的构造函数主要参数: 2. DragTarget 的工作原理3. 常见用法示例 1:实现一个简单的拖拽目标解释:示例 2:与 Draggable 结合使用解释: 4. DragTarget 的回调详解5. 总结 DragTarget 是 Flutt…

【Rhino】【Python】将beam线的端点沿着自身方向移动到column轮廓线上

#codingutf-8 import rhinoscriptsyntax as rs import Rhino.Geometry as rgdef extend_lines_to_columns():print("开始运行脚本...")# 定义要处理的图层名称beam_layer "Make2D::Visible::Curves::02 STR. SOLID MAMBER::1*.1.BEAM MAIN (UNIONED)"colu…

Huggingface数据集采样之后得到的arrow文件无法用Dataset.load_from_disk加载解决方法

问题起源 我现在有数据集 我想要采样1/10构成一个新的数据集。起初我只是简单的使用save_to_disk保存,如下代码: from datasets import Dataset import os# 原数据集路径 source_dataset_path "~/.cache/huggingface/datasets/allenai___tulu-3-…

js版本之ES6特性简述【Proxy、Reflect、Iterator、Generator】(五)

目录 Proxy Reflect 静态方法 部分实例 Iterator 实际开发迭代器的使用实例 迭代器(Iterator)应用 Generator Proxy Proxy 是 ES6 中新增的对象 Proxy 是JavaScript中的内置对象,它提供了一种机制,可以拦截并自定义各种…

React 组件通信完整指南 以及 自定义事件发布订阅系统

React 组件通信完整指南 1. 父子组件通信 1.1 父组件向子组件传递数据 // 父组件 function ParentComponent() {const [data, setData] useState(Hello from parent);return <ChildComponent message{data} />; }// 子组件 function ChildComponent({ message }) {re…

mac中idea菜单工具栏没有git图标了

1.右击菜单工具栏 2.选中VCS&#xff0c;点击添加 3.搜索你要的工具&#xff0c;选中点击确定就添加了 4.回到上面一个界面&#xff0c;选中你要放到工具栏的工具&#xff0c;点击应用就好了 5.修改图标&#xff0c;快捷键或者右击选中编辑图标 6.选择你要的图标就好了

Linux实验报告7-文件管理

目录 一&#xff1a;实验目的 二&#xff1a;实验内容 (1)查看/etc/inittab文件的权限属性&#xff0c;并指出该文件的所有者以及文件所属组群。 (2)新建文件test&#xff0c;设置文件权限为r--r-----。 (3)新建文件test2&#xff0c;设系统中有用户study和用户组studygr…

CPT203 Software Engineering 软件工程 Pt.4 软件设计(中英双语)

文章目录 6. 设计概念6.1 Principle6.2 Concepts6.2.1 General design concepts&#xff08;常见的设计概念&#xff09;6.2.1.1 Abstraction&#xff08;抽象&#xff09;6.2.1.2 Modularity&#xff08;模块化&#xff09;6.2.1.3 Functional independence&#xff08;功能独…