js 关闭页面时弹框提醒

于 2021-03-19 16:58:36 发布
阅读量3.4k 收藏 3
点赞数
分类专栏： js 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thesize/article/details/114819512
版权
在Vue.js项目中，为具有编辑功能的详情页面添加关闭提醒。原本使用beforeRouteLeave配合window.confirm提示用户，但发现需要在直接关闭窗口时也进行提示。通过学习了解到可以使用window.addEventListener()来实现，注意在注销事件监听器时，第二个参数不能使用匿名函数，以避免遇到问题。
摘要由CSDN通过智能技术生成

关闭页面时弹框提醒

在做vue项目时一个可编辑的详情页面需要在离开它的时候，根据页面是否改动的情况来判断是否要离开页面，一开始我只是在beforeRouteLeave里面调用的==window.confirm（）==来提示，

//调用
  beforeRouteLeave (to, form, next) {
   
    const isNext = this.isCanNextRoute() //这个是布尔值，来判断是否需要提示;
    console.log('isNext:', isNext)		 // true:不需要; false:需要;
    if (isNext) {
   
      next()
    } else {
   
      const isConfirm = window.confirm('您当前页面数据还没保存，确认要离开吗？', {
   
        confirmButtonText: '确定',
最低0.47元/天 解锁文章
骚瑞这是个bug
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用js实现关闭js弹出层的窗口
12-08
[removed]function toggle() {  theObj = document.getElementById(‘Sunyanzi’).style;  if (  theObj.display == “none” ) theObj.display = “block”; else theObj.display = “none”;}[removed]<div id=”Sunyanzi” xss=removed>你看我出现了~~~</div><br><input type=”button” onclick=”toggle
JS关闭弹窗方法
最新发布
weixin_48270492的博客
07-15 306
关闭弹窗不刷新 console.log("--------window.document.URL", window.document.URL);else { console.log("--------不在iframe中");关闭弹窗并且刷新 window.parent.location.reload();{ console.log("--------在iframe中");
Jsp页面跳转和js控制页面跳转的几种方法
weixin_30871905的博客
06-17 485
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet或者是JSP到另外的一个Servlet、JSP 或普通HTML文件,也即你的form提交至a.jsp,在a.jsp用到了forward()重定向至b.jsp,此时form提交的所有信息在 ...
javaScript关闭浏览器 (不弹出提示框)
weixin_30251587的博客
01-31 172
如果网页不是通过脚本程序打开的（window.open()），调用window.close()脚本关闭窗口前，必须先将window.opener对象置为null，否则浏览器（IE7、IE8）会弹出一个确定关闭的对话框。 ＜script language="javaScript"＞　　function closeWindow() 　　{　　　　　window.opener = null;　　　　　...
浏览器关闭事件处理
weixin_30652491的博客
04-15 97
//有确认退出var msg_unload="您的文章内容还没有进行保存！";var unloadConfirm = {};unloadConfirm.SetConfirmMsg = function(confirmMsg){ window.onBeforeUnload = function(event) { event = event || window.event;...
js实现关闭网页出现是否离开提示
11-29
这两个事件是页面生命周期中的关键环节，用于在页面即将关闭或刷新时执行特定的JavaScript代码，以提供对用户交互的额外控制。 **onbeforeunload**事件是在页面即将被卸载（刷新或关闭）之前触发，通常用于提示用户...
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”
01-19
解除jquery离开页面弹出提（1） 先解除绑定在设置弹出内容为null。 代码如下:  $(function(){  $(window).unbind(‘beforeunload’);  [removed] = null;  }) 二、其他相关[摘要] （1）window的onunload和...
js右下角弹框
07-09
根据提供的文件信息，本文将详细解析“js右下角弹框”的实现原理和技术要点，并针对提供的三种JavaScript弹框示例进行深入分析。 ### 一、理解JS右下角弹框 #### 1.1 弹框简介 在网页设计中，右下角弹出窗口是一种...
js实现用户离开页面前提示是否离开此页面的方法（包括浏览器按钮事件）
01-19
本文实例讲述了js实现用户离开页面前提示是否离开此页面的方法（包括浏览器按钮事件）。分享给大家供大家参考。具体如下： 用户离开页面前，提示是否离开此页面（包括浏览器按钮事件） [removed] [removed] = ...
js 页面关闭前的出现提示的实现代码
01-19
实现起来比较简单如下 代码如下: [removed] = function() { 　　return “确定离开页面吗？”; } 还有一种写法 代码如下: [removed] = function(event) { (event || window.event).returnValue = “确定退出吗”; } 这个方法chrome和safari不支持，但是由于ie和ff的支持，html5也加入了标准… 大家都知道浏览器的几种弹出对话框都会阻止事件的往下进行，(如alert，confirm)，进一步操作后会继续事件的往下执行 一般的做法都
js 实现 关闭窗口时的提示
03-30
js 实现 关闭窗口时的提示! 值得下载看看!资源免费,大家分享!!
js 关闭页面时，弹出窗口
chruan的专栏
05-16 1398
关闭页面时，弹出窗口。只ie。   /****** popup a window while closing*****/ window.onbeforeunload = function (){ openWin("b.html","",520,380); //alert("close"); if (event.clientX < document.body.clientWidth &&
js 关闭当前窗口时弹出警告框
03-06 1809
window.onbeforeunload = function() { return "该页面无法保存当前状态，是否确认退出？"; };
js关闭窗口不出现提示框
songxiuliang的专栏
03-29 498
function closeWindow() {            window.open('', '_self');           window.close();       }
JS关闭页面提示
weixin_30713953的博客
06-07 191
<html><head><title>茶界网-确认关闭页面提示窗口</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"></head><!--把下面代码加到<body>与</body>之间--...
js在关闭页面前弹出确认提示【转载】
aomin7319的博客
09-15 850
最近项目中出现个bug，就是导出数据后，会提示确认导航，其实实际需求并不需要这个提示，可能是之前遗留的问题。查了下资料是在触发了onbeforeunload事件，那么剩下的就是代码组织问题了。 众所周知，现在的主流浏览器基本上都是多标签页的。在标签页数量较多的时候，可能连标签页的标题都无法看清。因此，用户可能一不小心就关错了标签 页，或者直接点击浏览器右上角的关闭按钮一不小心就关闭了所...
js弹出页面窗口和关闭
热门推荐
zhjxixi的专栏
11-26 4万+
JS定时自动关闭窗口    function closewin(){  self.opener=null;  self.close();}  function clock(){i=i-1  document.title="本窗口将在"+i+"秒后自动关闭!";  if(i>0)setTimeout("clock();",1000);  else closewin();}  v
用js定时关闭alert弹框
06-07
由于 `alert` 是浏览器原生的弹框，无法通过修改样式来关闭它，所以需要使用 `setTimeout()` 函数来实现定时关闭 `alert` 弹框的效果。 具体步骤如下： 1. 弹出 `alert` 弹框。 2. 使用 `setTimeout()` 函数来延迟执行关闭 `alert` 的代码。 3. 在 `setTimeout()` 函数中编写关闭 `alert` 的代码，如使用 `window.close()` 方法关闭弹框窗口。 代码示例： ```javascript // 弹出 alert 弹框 alert("这是一个提示框！"); // 延迟 3 秒后关闭 alert 弹框 setTimeout(function() { window.close(); }, 3000); ``` 在上述代码中，我们设置了一个延迟时间为 3 秒钟，当延迟时间到达后，弹框就会自动关闭。请注意，关闭弹框需要在弹框窗口的上下文中进行，因此我们使用了 `window.close()` 方法来关闭弹框窗口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值