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 不好使 ???
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© 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
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!");
}
https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm
dialog
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
webkit/blink
https://en.wikipedia.org/wiki/Google_Chrome
https://en.wikipedia.org/wiki/V8_(JavaScript_engine)
https://en.wikipedia.org/wiki/Browser_engine
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:
- DOM, HTML DOM and CSS rendering engines
- Web IDL implementation
- Skia Graphics engine — makes calls to an underlying Graphics Library (like OpenGL, Vulkan, DirectX etc) which depends on the platform
- V8 JavaScript engine
refs
https://github.com/xgqfrms/iframe/issues/4#issuecomment-1763820120
https://www.cnblogs.com/xgqfrms/p/14435133.html#5219223
©xgqfrms 2012-2025
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！
本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/17767300.html
未经授权禁止转载，违者必究！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
2022-10-16 Vue 3 响应式原理源码解析 All In One
2022-10-16 TypeScript Type Manipulation All In One
2022-10-16 superscript & subscript symbol All In One
2020-10-16 前端微服务架构-微前端
2020-10-16 why 2020 you should create a new modern website with webfullstack All In One
2020-10-16 JSON-LD 结构化数据
2019-10-16 computer object name