js实现操作浏览器返回时，页面有弹窗则关闭弹窗而不实际返回

已于 2024-03-26 11:37:02 修改
阅读量512 收藏 4
点赞数 6
分类专栏： vue 文章标签： javascript vue.js 前端
于 2024-03-26 09:58:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21473443/article/details/137035700
版权
本文介绍了如何使用JavaScript和Vue.js在浏览器返回时，如果页面存在弹窗则关闭弹窗而不是实际回退。通过监听popstate事件、利用window.history.pushState添加历史记录，并在打开和关闭弹窗时执行相应操作。
摘要由CSDN通过智能技术生成

关于popstate、pushState参考：HTML5的popstate、pushState、replaceState如何玩转浏览器历史记录-CSDN博客文章浏览阅读1.3w次，点赞8次，收藏30次。一、popstate用来做什么的？简而言之就是HTML5新增的用来控制浏览器历史记录的api。二、过去如何操纵浏览器历史记录？window.history对象，该对象上包含有length和state的两个值，在它的__proto__上继承有back、forward、go等几个功能函数在popstate之前，我们可以利用back、forward、go对history进行后退和前进操作。例..._popstatehttps://blog.csdn.net/qq_40028324/article/details/83268502

上述大神分享的例子也是常见的一种业务场景，值得参考学习。

言归正传，分享如题场景的实现方案：

前提：由于点击页面按钮打开弹窗后，可以通过点击关闭按钮来关闭弹窗、也可以通过操作手机或

最低0.47元/天 解锁文章
jingqw
关注
专栏目录
JavaScript弹窗关闭的编程方法
HackDashX的博客
09-30 1205
方法，我们可以在JavaScript中关闭弹窗。这是一种简单而常用的技术，用于实现用户友好的网页交互体验。但需要注意的是，关闭窗口的能力可能会受到浏览器的限制和安全策略的影响。因此，在实际使用中，我们需要注意这些限制，并确保在适当的情况下使用弹窗关闭功能。然后，点击"关闭弹窗"按钮，你将看到弹窗被关闭。方法打开的，那么只有在同一个同一个域名下打开的窗口才能被关闭。这个方法可以在弹窗的JavaScript代码中调用，以实现关闭弹窗的功能。的JavaScript函数，该函数在点击按钮时被调用。
JS实现自定义弹窗功能
10-18
在网页开发中，为了提供更好的用户体验和更丰富的交互效果，我们常常需要自定义弹窗，而不是使用浏览器默认的警告、确认或输入对话框。本文将详细介绍如何使用JavaScript（JS）来实现一个自定义的弹窗功能。 首先，...
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
10-17
主要介绍了vue 弹窗时 监听手机返回键关闭弹窗功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值(页面不跳转) ,需要的朋友可以参考下
最完美解决方案：js弹出窗口关闭当前页面，而不弹出提示框
weixin_30776273的博客
09-21 517
该功能主要用于业务系统中的登录操作，登录后弹出全屏的业务系统主界面，而不需要工具栏、地址栏、菜单等功能。 之前针对不同浏览器找了无数种方法，包括网上能查到的所有方法，弹出的结果都不理想。结果有的IE6，7,8支持但是IE11不支持，有些火狐支持，chrome不支持。 最后找了很久才找到这个方法：经过测试IE6、IE7、IE8、IE11，Chrome都很理想。唯一360浏览器弹出了新窗...
js实现浏览器返回
qq719756146的博客
03-20 1948
window.history.back(-1);
javascript阻止浏览器回退事件
anzhengxv的博客
06-23 2506
文章详细的介绍了浏览器禁止回退功能实现，包括强制禁止，修改历史记录禁止，JavaScript禁止 Vue.js、React 和 Angular 的禁止回退示例。
JS关闭弹窗方法
最新发布
weixin_48270492的博客
07-15 426
关闭弹窗不刷新 console.log("--------window.document.URL", window.document.URL);else { console.log("--------不在iframe中");关闭弹窗并且刷新 window.parent.location.reload();{ console.log("--------在iframe中");
简述JS浏览器的三种弹窗
10-18
JavaScript（简称JS）是网页开发中的重要脚本语言，它提供了与用户交互的多种方式，其中最基础且直观的交互手段就是浏览器内置的三种弹窗：`alert`、`confirm` 和 `prompt`。这些弹窗函数使得开发者可以向用户显示...
JS浏览器事件
kkddqq1121的博客
11-13 388
2.localStorage：永久存储到客户端本地。3.cookie：把信息存储到客户端的浏览器中。1.session：信息存储到服务器上。1.点击跳转到下一页。
vue2路由跳转和浏览器回退时弹窗的开启
weixin_46369590的博客
08-07 1208
我这里有个需求是在A页面中的详情弹框中，点击按钮跳转到B页面的新增弹框中，并把A页面中的数据带过去填到B页面新增的form表单中，此时如果点击了浏览器的回退按钮，就会重新回到A页面中刚才打开的那条数据的详情弹框。
html弹窗返回,Js弹出页面,关闭页面返回值
weixin_35196909的博客
06-25 728
Default.aspx /p>js在关闭页面前弹出确认提示众所周知，现在的主流浏览器基本上都是多标签页的。在标签页数量较多的时候，可能连标签页的标题都无法看清。function closeWindow(){var ua=navigator.userAgentvar ie=navigator.appName=="Microsoft Internet Explorer"?...用惯了WPF的...
js监听返回当前页面的方法
qq_42431718的博客
01-20 1194
这个事件会在浏览器的历史记录发生变化时被触发，其中包括用户点击了浏览器的后退按钮或者通过编程方式调用了。方法时，这个函数就会被触发。在这个处理函数中，我们打印了一个日志信息，表示用户已经返回了当前页面。要监听用户返回当前页面的操作，可以使用JavaScript中的。事件处理函数，当用户点击浏览器的后退按钮或者调用。在上述示例中，我们在页面加载时定义了一个。以下是一个简单的示例代码，演示如何使用。事件来监听用户返回当前页面的操作。// 用户返回当前页面时执行的操作。'用户返回了当前页面！
Jsp页面跳转和js控制页面跳转的几种方法
weixin_30871905的博客
06-17 495
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet或者是JSP到另外的一个Servlet、JSP 或普通HTML文件,也即你的form提交至a.jsp,在a.jsp用到了forward()重定向至b.jsp,此时form提交的所有信息在 ...
js监听浏览器返回、后退、上一页按钮事件方法
热门推荐
m0_55969466的博客
06-08 2万+
⼤家知道在页⾯中我们可以使⽤javascript window history，后退到前⾯页⾯，但是由于安全原因javascript不允许修改history ⾥已有的url链接，但可以使⽤pushState⽅法往history⾥增加url链接，并且提供popstate事件监测从history栈⾥弹出url。既然 有提供popstate事件监测，那么我们就可以进⾏监听。...
h5移动端，通过监听路由回退事件关闭弹窗
程序员超超的博客
07-09 1217
在做商品详情页的时候，也调研了其他的app交互。其中有一个交互是在商品详情页，点击当前商品包含的服务详情按钮，会弹窗，点击返回按钮或者手机自带的返回，会关闭弹窗。如果是h5内嵌app的话，逻辑还是比较简单的，app监听到这个返回事件，回传给h5就好了。其实思路很简单，就是打开模态框的时候，往路由栈里面push一个当前路由一摸一样的路由，点击返回或者按键返回的时候，在弹出，然后监听对应的事件就可以了。最近在做一个商城项目，项目设计是在移动端浏览器上使用。，我在这个思路基础上，做了一些定制，代码如下，
弹出窗口并向父页面返回值的两种常用方法
yinyuwen0的专栏
05-14 885
本页内容为：弹出窗口并向父页面返回值的两种常用方法，该文章本站转载自网络，如有侵权请告之，我们将会及时将其删除，其正文内容如下： 方法一：使用showModalDialog方法 新建文件lyh.html 输入 来自Eric空间 返回值： function show(math) { var val= showModalDialog(math,"tru
JS实现弹出子窗口并获取返回值功能
weixin_42340354的博客
02-19 6363
最近一段时间,所做系统需要实现使用js弹出一个自定义窗口,并且获取窗口的返回值功能,经多方查询未能找到较好的示例,所以无奈之下自己开发了一个弹出式窗口,并稍微封装了一下.废话少说,上代码: 父页面弹出窗口示例: $("#c_id").click(function(){///一个点击事件 ///调用已封装的js,传入子页面url以及回调方法 openWindow.open({ ...
请求后台处理后，返回处理结果弹窗提示的几种方案
causually的博客
06-02 1万+
response.setContentType("text/html;charset=utf-8");  //response.getWriter().write("<script>alert('该数据已经同步完成');</script>");  response.getWriter().write( "<script>alert('此用户名已存...
form表单提交返回页面alert弹窗提示
alan3494的博客
12-04 2万+
//在action方法中，方法的返回里 HttpServletResponse response=ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=utf-8"); PrintWriter out=re
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值