xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

How to fix the bug that the beforeunload event cannot be triggered All In One

How to fix the bug that the beforeunload event cannot be triggered All In One

如何修复 beforeunload 事件无法触发的 bug All In One

beforeunload

    const beforeUnloadHandler = (event) => {
      event.preventDefault();
      // Equivalent to the following legacy mechanisms
      //   event.returnValue = "string";
      //   return "string"; (only works with onbeforeunload)
    };
    const nameInput = document.querySelector("#name");
    nameInput.addEventListener("input", (event) => {
      if (event.target.value !== "") {
        window.addEventListener("beforeunload", beforeUnloadHandler);
      } else {
        window.removeEventListener("beforeunload", beforeUnloadHandler);
      }
    });

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#examples

对 chrome 不好使 ???

image

chrome ❌

无法触发

https://github.com/mdn/content/issues/29655

safari ✅

demos

<!DOCTYPE html>
<html lang="zh-Hans">
<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">
  <meta name="author" content="xgqfrms">
  <meta name="generator" content="VS code">
  <title>beforeunload</title>
</head>
<body>
  <header>
    <h1>beforeunload</h1>
  </header>
  <main>
    beforeunload
    <form>
      <input type="text" name="name" id="name" />
      <p>谷歌、火狐、edge等浏览器中<mark>被优化了</mark>，需要用户在页面<mark>有过未保存的内容的操作</mark>才会出现提示！⚠️</p>
      <input type="email" name="email" />
      <input type="tel" name="tel" />
    </form>
  </main>
  <footer>
    <p>copyright&copy; xgqfrms 2022</p>
  </footer>
  <!-- <script type="module" src="./app.js"></script> -->
  <script>
     window.onunload = () => {
        window.confirm("Do you really want to leave?")
        // window.confim("确定离开吗？");
     }
    const beforeUnloadHandler = (event) => {
      event.preventDefault();
      // Equivalent to the following legacy mechanisms
      //   event.returnValue = "string";
      //   return "string"; (only works with onbeforeunload)
    };
    const nameInput = document.querySelector("#name");
    nameInput.addEventListener("input", (event) => {
      if (event.target.value !== "") {
        window.addEventListener("beforeunload", beforeUnloadHandler);
      } else {
        window.removeEventListener("beforeunload", beforeUnloadHandler);
      }
    });
  </script>
  <!-- <script type="module">
    import {init} from "./app.js";
    console.log(`init`, init);
    init && init();
  </script> -->
</body>
</html>

https://iframe.xgqfrms.xyz/Web-APIs/beforeunload.html

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

confirm

 window.onunload = () => {
  window.confirm("Do you really want to leave?")
  // window.confim("确定离开吗？");
 }

if (window.confirm("Do you really want to leave?")) {
  window.open("exit.html", "Thanks for Visiting!");
}

image

https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm

dialog

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

https://en.wikipedia.org/wiki/Google_Chrome

https://en.wikipedia.org/wiki/V8_(JavaScript_engine)

image

https://en.wikipedia.org/wiki/Browser_engine

image

https://en.wikipedia.org/wiki/Comparison_of_browser_engines

https://en.wikipedia.org/wiki/WebKit

https://www.chromium.org/blink/

https://en.wikipedia.org/wiki/Blink_(browser_engine)

Blink engine has the following components:

  1. DOM, HTML DOM and CSS rendering engines
  2. Web IDL implementation
  3. Skia Graphics engine — makes calls to an underlying Graphics Library (like OpenGL, Vulkan, DirectX etc) which depends on the platform
  4. V8 JavaScript engine

refs

https://github.com/xgqfrms/iframe/issues/4#issuecomment-1763820120

https://www.cnblogs.com/xgqfrms/p/14435133.html#5219223

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2023-10-16 14:44  xgqfrms  阅读(3)  评论(2)  编辑  收藏  举报