按理说，

浏览器 Window 底层操作全解

📑 目录

1. 页面关闭拦截与生命周期
2. 窗口间数据共享与通信
3. 窗口管理与导航控制
4. 浏览器历史栈操作
5. 页面可见性与后台运行
6. 存储机制底层原理
7. 窗口尺寸与视口控制
8. 打印与媒体控制
9. 底层事件与程序交互
10. 安全策略与跨域限制

一、页面关闭拦截与生命周期

⭐ Q1：如何阻止使用者关闭页面或刷新时丢失未保存的数据？

答：

"未保存的数据突然消失" 是最让前端同学头疼的问题。

window.addEventListener => {
if {
event.preventDefault;// Chrome & Safari
event.returnValue = '';// 必须设置
return '';// 某些旧浏览器需要
}
});

⚠️ 限制：

* 推荐做法：结合表单自动保存 + sessionStorage/IndexedDB 做兜底。

let hasUnsavedChanges = false;const form = document.querySelector;form.addEventListener => { hasUnsavedChanges = true;})，function debounce {
let timer;return => clearTimeout || => fn,delay));}
form.addEventListener => {
sessionStorage.setItem));
hasUnsavedChanges = false;
},1000))，window.addEventListener('beforeunload',e => {
if {
e.preventDefault;e.returnValue = '';}
})，function getFormData { /* ... */ }
function getFormData {}


⭐⭐ Q2：`beforeunload`、`unload` 与 `pagehide` 的区别？

"想在离开前发送埋点，却发现请求被取消"
正在卸载中 ❌ 无法阻止 ❌ 同步执行风险高，建议只做同步埋点或使用 sendBeacon 埋点、清理资源等简单任务 visibilitychange' 可以在背景页暂停视频等功能。


⭐⭐⭐ Q3：什么是 bfcache？如何控制它，**
从**答**来看，

"bfcache 的条件":


No pending XHR/fetch.
No open WebSocket.

No unload listener.No playing media.No heavy timers that would block unloading.No pending async storage writes that would be lost.

"如何检测"的观点是。javascript
window.addEventListener('pageshow',e => {
if console.log;})，




⭐⭐⭐⭐ Q4：实现可靠“页面意外关闭前自动保存”机制？
**
javascript
class PageGuard {
constructor {
this.draftKey = 'page_draft';this.lastSaveTime = Date.now;this.init，}
init {
// 定时自动保存
this.autoTimer = setInterval => this.save,5000);// 输入防抖
document.addEventListener => this.save,200));// 页面可见性变化立即保存
document.addEventListener => {
if this.flush;else if this.resetTimer;})，// beforeunload 最终的尝试
window.addEventListener('beforeunload',e => {
if ) {this.save;e.preventDefault;e.returnValue='';}
})，}
save { /* 收集 & 写入 IndexedDB 或 sessionStorage */ }


}
new PageGuard;



⭐ Q1 如何在新打开的窗口和原窗口之间传递数据？怎么说呢，**


javascript
// 父 -> 子 同域
const child = window.open;child.onload = => child.postMessage;

// 子 -> 父 同域 postMessage + opener 引用
console.log;话说回来，// 父窗口对象
window.opener.postMessage;

javascript

// 窗口 A 写 localStorage 数据，B 接收变化：
localStorage.setItem);window.addEventListener=>{
if{
const data=JSON.parse;console.log，}
});


注意: 事件仅在 其他标签页 中触发。




相比 localStorage 更好在哪儿？**


javascript
const bc=new BroadcastChannel;bc.postMessage;bc.onmessage=e=>console.log;bc.close，话说回来，


事件 
触发时机 
能否阻止 
异步支持 
典型用途 



beforeunload 
即将卸载前 
✔︎ 弹窗阻止 
❌ 不推荐异步。可能被取消 
确认未保存数据提示等 

unload 

pagehide 页面隐藏





Feature
localStorage+storage
BroadcastChannel




API
隐式写磁盘 + 异步
原生消息通道


数据类型
字符串
任意结构化对象


性能
写磁盘慢
内存高速


隐私模式
禁用可能导致无效
可受限但更安全






⭐⭐⭐ Q3 如何获取前一个窗口的数据？方案对比**












 

 

                     –>