JS阻止浏览器刷新的方法

吴迪98

于 2019-05-14 20:05:59 发布

阅读量2.7w

点赞数 4

分类专栏：吴小迪专栏之原生JS 文章标签： JS阻止浏览器刷新的方法 JavaScript阻止浏览器刷新的方法阻止浏览器刷新的方法阻止浏览器刷新方法的注意事项阻止浏览器刷新的代码

本文链接：https://blog.csdn.net/weixin_43606158/article/details/90213950

版权

吴小迪专栏之原生JS 专栏收录该内容

94 篇文章 33 订阅

订阅专栏

直接先给朋友们上阻止浏览器刷新的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div contenteditable="true">
    hello world!
  </div>
  <button onclick="document.execCommand('Bold')">加粗</button>
  <script>
    window.onbeforeunload = function(e) {
      var dialogText = 'CSDN 吴小迪';
      e.returnValue = dialogText;
      return dialogText;
    };
  </script>
</body>
</html>

此代码在用户进行F5刷新的时候是百分之百会进行提示的。效果如下：
在这里插入图片描述
但是如果用户是点击的浏览器的刷新按钮的话会有些不一样。
这个就是浏览器自带的刷新按钮：

接下来我们讲点击这个按钮的时候的不同之处：
当页面没有进行更改操作的时候就不会弹出此提示框，会直接刷新，只有当界面更改内容的时候才会出现提示框：
现在我们尝试将hello world!加粗一下再进行刷新看看效果：
在这里插入图片描述
此时发现它与按F5刷新一样了，开始弹出提示框了。