js 离开当前页面提示

野性酷女 2022-06-18 00:21 270阅读 0赞

需求 ： 当用户离开html 页面时，希望给用户弹出一个提示，以免丢失用户输入的信息。

实现： 使用了jquery 。 html 代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>cookie</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    
    var IsModifyed = false; /*当前页是否触发修改点*/
    function SetBeforeunload(modify) { 
    	IsModifyed = !!modify; 
    	window.onbeforeunload = IsModifyed ? function() { return "你尚未保存，确定离开吗?"; } : null; }
    
    $(function() {
        SetBeforeunload(false);
        /*取消 修改动作*/
        $(".cancelmodifymarks").click(function() {
            SetBeforeunload(false);
        });
        /*修改动作 标记*/
        $(".modifymarks").click(function() {
            SetBeforeunload(true);
        });
    });
    </script>
    </head>
    <body>
    AAA
    <input class="cancelmodifymarks" type="text" value="AAA"/>
    ccc
    <input class="modifymarks" type="text" value="ccc"/>
    
    </body>
    </html>

效果： 点击值为"ccc" 的Input 框，离开本html 页面(如：IE 的刷新，关闭等)，会有提示信息。在点击值为"AAA" 的Input 框，离开页面时，不会有提示信息。

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现当前页面关闭功能

页面实现 <div> <input type="button" value="关闭当前页" class="close" onclick="closeWin(

男娘i/ 2023年10月18日 15:08/ 0 赞/ 129 阅读

相关 vue 中js页面跳转到静态页面_Vue.js当前页面跳转当前页面$route.fullpath

在vue中如何去实现当前页面跳转当前页面，看完这篇文章，相信你的心里会有答案关于当前页面跳转在实际项目中有这个需求，当然，实现方式很多，在这里主要说一个比较优雅的方式，通过绑定

心已赠人/ 2022年10月27日 01:49/ 0 赞/ 203 阅读

相关 js技能提升——关闭当前页面

最近在做后台管理系统时，遇到一个需求，点击某个按钮时，需要重新打开一个浏览器选项卡，然后还可以关闭此选项卡。打开新的浏览器选项卡 `window.open(url,

柔光的暖阳◎/ 2022年08月28日 04:53/ 0 赞/ 214 阅读

相关 js 离开当前页面提示

需求：当用户离开html 页面时，希望给用户弹出一个提示，以免丢失用户输入的信息。实现：使用了jquery 。 html 代码如下。 <!DOCTYP

野性酷女/ 2022年06月18日 00:21/ 0 赞/ 271 阅读

相关 JS实现页面跳转，JS获取当前页面地址

JS有时候需要实现页面跳转，那么可以直接在某个事件触发中设置 location.href="/user/center/" 这样即可实现页面跳转。 \\

- 日理万妓/ 2022年05月27日 01:56/ 0 赞/ 319 阅读

相关 JS关闭当前页面的方法

一、不带任何提示关闭窗口的js代码 1 <a href="javascript:window.opener=null;window.open('','_self');

比眉伴天荒/ 2021年11月26日 11:48/ 0 赞/ 333 阅读

相关 js关闭当前页面

关闭当前页面 function closeWindow(){ var userAgent = navigator.userAgent; if (u

刺骨的言语ヽ痛彻心扉/ 2021年10月13日 21:16/ 0 赞/ 453 阅读

相关 js实现用户关闭页面时提示是否离开此页面的方法

<script type="text/javascript"> window.onbeforeunload = function(){

﹏ヽ暗。殇╰゛Y/ 2021年09月27日 21:14/ 0 赞/ 355 阅读

相关 js获取当前页面的URL

在很多场景中我们需要在某个界面（不能确定的界面）跳转到另一个界面进行某项操作，然后操作完毕之后重新跳转到之前的页面（如浏览商品的过程中进行登录，登录后返回到浏览商品的界面），因

Myth丶恋晨/ 2021年09月26日 06:22/ 0 赞/ 511 阅读

相关 js离开页面执行函数 onbeforeunload与onunload事件

转自：https://www.cnblogs.com/xianyulaodi/p/5035171.html 仅用于学习在最近的项目中，需要做到一个时间，就是用户

朱雀/ 2021年09月14日 15:26/ 0 赞/ 525 阅读