前言

在瀏覽器環(huán)境中，window 對(duì)象扮演著雙重角色：它既是 JavaScript 訪問(wèn)瀏覽器窗口的接口，又是 ECMAScript 規(guī)定的 Global 對(duì)象。理解 window 的屬性與方法，是掌握瀏覽器環(huán)境開(kāi)發(fā)的第一步。

一、 Window 對(duì)象的雙重身份

1. 瀏覽器窗口接口：控制窗口大小、位置、導(dǎo)航等。
2. 全局作用域：通過(guò) var 聲明的變量、函數(shù)都會(huì)變成 window 的屬性（注意：let 和 const 不會(huì)）。

二、 窗口層級(jí)：Top 與 Parent 的奧秘

在處理 <iframe> 嵌套或多窗口場(chǎng)景時(shí)，精確定位窗口層級(jí)至關(guān)重要。

• window.top：始終指向最外層的瀏覽器窗口（即最頂層的框架）。
• window.parent：指向當(dāng)前窗口的直接上層窗口。如果當(dāng)前窗口本身就是頂層，則 parent 等于 self。
• window.self：指向當(dāng)前窗口，與 window 等價(jià)。

同源限制：只有在同源（協(xié)議、域名、端口一致）的情況下，才能通過(guò)這些屬性訪問(wèn)父窗口的 DOM 或變量。

三、 窗口尺寸：Inner vs Outer

很多開(kāi)發(fā)者分不清這兩組屬性的區(qū)別，看圖最直觀：

提示：由于不同瀏覽器的 UI 組件（如側(cè)邊欄、收藏夾）占用空間不同，outer 系列的值在各平臺(tái)差異較大。

四、 窗口導(dǎo)航與彈窗控制：window.open

window.open(url, name, features, replace) 是控制頁(yè)面跳轉(zhuǎn)的利器。

1. 參數(shù)細(xì)節(jié)

• name：這是一個(gè)隱藏的“黑科技”。若已存在同名窗口，瀏覽器會(huì)在該窗口加載 URL，而不是新建標(biāo)簽頁(yè)。這常用于單頁(yè)面應(yīng)用中的跨窗口通信。
• features：字符串格式，如 "width=400,height=300,top=100,left=100"。
• replace：布爾值。如果為 true，新頁(yè)面將替換當(dāng)前頁(yè)在歷史記錄（History）中的位置，用戶點(diǎn)擊“后退”無(wú)法回到原頁(yè)面。

2. 安全性與攔截處理

由于廣告彈窗濫用，現(xiàn)代瀏覽器對(duì) window.open 有嚴(yán)格限制：只有由用戶操作（如點(diǎn)擊事件）觸發(fā)的彈窗才會(huì)被允許。

最佳實(shí)踐檢測(cè)代碼：

// 嘗試打開(kāi)新窗口
let popup = window.open('https://juejin.cn', '_blank');

// 檢測(cè)是否被攔截（某些插件會(huì)導(dǎo)致 popup 為 null，某些瀏覽器會(huì)拋出異常）
try {
  if (popup == null || popup.closed || typeof popup.closed === 'undefined') {
    console.warn('彈窗被瀏覽器攔截，請(qǐng)引導(dǎo)用戶手動(dòng)開(kāi)啟權(quán)限！');
  }
} catch (e) {
  console.error('彈窗被攔截或發(fā)生跨域錯(cuò)誤');
}

五、 面試模擬題

Q1：window.onload和DOMContentLoaded有什么區(qū)別？

參考回答：

• DOMContentLoaded：當(dāng) HTML 文檔被完全加載和解析完成時(shí)觸發(fā)，不需要等待樣式表、圖像和子框架的完成加載。
• window.onload：等整個(gè)頁(yè)面所有資源（包括圖片、Flash、CSS等）全部加載完成后才觸發(fā)。
• 性能建議：通常建議將腳本邏輯放在 DOMContentLoaded 中以提升響應(yīng)速度。

Q2：如何通過(guò) JS 判斷當(dāng)前頁(yè)面是否在 iframe 中運(yùn)行？

參考回答：

可以通過(guò)比較 window.self 和 window.top：

if (window.self !== window.top) {
  console.log('當(dāng)前頁(yè)面運(yùn)行在 iframe 中');
}

Q3：為什么不建議在全局作用域中使用變量名name？

參考回答：

因?yàn)?window.name 是一個(gè)內(nèi)置的特殊屬性。它有一個(gè)特性：即使頁(yè)面刷新或跳轉(zhuǎn)到另一個(gè)域名，window.name 的值也會(huì)持久存在（直到窗口關(guān)閉）。如果你在全局定義了 var name = 'test'，實(shí)際上是在修改這個(gè)內(nèi)置屬性，可能會(huì)引發(fā)意外的行為。

總結(jié)

到此這篇關(guān)于JavaScript中BOM核心window對(duì)象詳解的文章就介紹到這了,更多相關(guān)JS BOM核心window對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論