Window

Baseline 廣泛可用 *

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

Window 介面表示一個包含DOM文件的視窗,其 document 屬性指向視窗中載入的DOM 文件

可以使用 document.defaultView 屬性來獲取指定文件的視窗。

全域性變數 window 表示指令碼正在其中執行的視窗,它被暴露給 JavaScript 程式碼。

Window 介面是各種函式、名稱空間、物件和建構函式的大本營,它們不一定與使用者介面的視窗概念直接相關。然而,Window 介面是一個合適的地方,可以包含這些需要全域性可用的專案。其中許多內容都記錄在 JavaScript 參考DOM 參考中。

在標籤頁式瀏覽器中,每個標籤頁都由其自己的 Window 物件表示;在特定標籤頁內執行的 JavaScript 程式碼所看到的全域性 window 始終代表程式碼正在執行的標籤頁。也就是說,即使在標籤頁式瀏覽器中,一些屬性和方法仍然適用於包含該標籤頁的整個視窗,例如 resizeTo()innerHeight。通常,任何不能合理地應用於標籤頁的事物都將應用於視窗。

EventTarget Window

例項屬性

此介面從 EventTarget 介面繼承屬性。

注意,作為物件的屬性(例如,用於覆蓋內建元素的原型)在下面的單獨部分中列出。

Window.caches 只讀 安全上下文

返回與當前上下文關聯的 CacheStorage 物件。此物件啟用了諸如為離線使用儲存資產以及生成對請求的自定義響應等功能。

Window.clientInformation 只讀

Window.navigator 的別名。

Window.closed 只讀

此屬性指示當前視窗是否已關閉。

Window.cookieStore 只讀 安全上下文

返回對當前文件上下文的 CookieStore 物件的引用。

Window.credentialless 只讀 實驗性

返回一個布林值,指示當前文件是否載入在無憑據的 <iframe> 中。有關更多詳細資訊,請參閱無憑據 IFrame

Window.crossOriginIsolated 只讀

返回一個布林值,指示網站是否處於跨域隔離狀態。

Window.crypto 只讀

返回與全域性物件關聯的 Crypto 物件。

Window.customElements 只讀

返回對 CustomElementRegistry 物件的引用,該物件可用於註冊新的自定義元素並獲取有關先前註冊的自定義元素的資訊。

Window.devicePixelRatio 只讀

返回當前顯示裝置中物理畫素和裝置獨立畫素之間的比率。

Window.document 只讀

返回對視窗所包含文件的引用。

Window.documentPictureInPicture 只讀 實驗性 安全上下文

返回對當前文件上下文的文件畫中畫視窗的引用。

Window.fence 只讀 實驗性

返回當前文件上下文的 Fence 物件例項。僅適用於嵌入在 <fencedframe> 中的文件。

Window.frameElement 只讀

返回視窗嵌入的元素,如果視窗未嵌入,則返回 null。

Window.frames 只讀

返回當前視窗中子框架的陣列。

Window.fullScreen 非標準

此屬性指示視窗是否以全屏模式顯示。

Window.history 只讀

返回對 history 物件的引用。

Window.indexedDB 只讀

為應用程式提供一種非同步訪問索引資料庫功能的機制;返回一個 IDBFactory 物件。

Window.innerHeight 只讀

獲取瀏覽器視窗內容區域的高度,如果水平捲軸已渲染,則包括其高度。

Window.innerWidth 只讀

獲取瀏覽器視窗內容區域的寬度,如果垂直捲軸已渲染,則包括其寬度。

Window.isSecureContext 只讀

返回一個布林值,指示當前上下文是否安全(true)或不安全(false)。

Window.launchQueue 只讀 實驗性

當一個漸進式 Web 應用 (PWA) 以 launch_handlerclient_mode 值為 focus-existingnavigate-newnavigate-existing 啟動時,launchQueue 提供了對 LaunchQueue 類的訪問,從而可以為 PWA 實現自定義的啟動導航處理。

Window.length 只讀

返回視窗中框架的數量。另請參閱 window.frames

Window.localStorage 只讀

返回對本地儲存物件的引用,用於儲存只能由建立它的源訪問的資料。

Window.location

獲取/設定視窗物件的位置或當前 URL。

Window.locationbar 只讀

返回 locationbar 物件。

Window.menubar 只讀

返回 menubar 物件。

Window.mozInnerScreenX 只讀 非標準

返回視窗視口左上角的水平(X)座標,單位為螢幕座標。該值以 CSS 畫素報告。如果需要,可參考 nsIDOMWindowUtils 中的 mozScreenPixelsPerCSSPixel 進行轉換以適應螢幕畫素。

Window.mozInnerScreenY 只讀 非標準

返回視窗視口左上角的垂直(Y)座標,單位為螢幕座標。該值以 CSS 畫素報告。如果需要,可參考 mozScreenPixelsPerCSSPixel 進行轉換以適應螢幕畫素。

Window.name

獲取/設定視窗的名稱。

Window.navigation 只讀 實驗性

返回當前 window 關聯的 Navigation 物件。這是 Navigation API 的入口點。

Window.navigator 只讀

返回對 navigator 物件的引用。

Window.opener

返回開啟當前視窗的視窗的引用。

Window.origin 只讀

返回全域性物件的源,序列化為字串。

Window.originAgentCluster 只讀

如果此視窗屬於一個以源為鍵的代理叢集,則返回 true

Window.outerHeight 只讀

獲取瀏覽器視窗外部的高度。

Window.outerWidth 只讀

獲取瀏覽器視窗外部的寬度。

Window.pageXOffset 只讀

window.scrollX 的別名。

Window.pageYOffset 只讀

window.scrollY 的別名。

Window.parent 只讀

返回對當前視窗或子框架的父視窗的引用。

Window.performance 只讀

返回一個 Performance 物件,其中包括 timingnavigation 屬性,每個屬性都是一個提供效能相關資料的物件。另請參閱使用導航計時以獲取更多資訊和示例。

Window.personalbar 只讀

返回 personalbar 物件。

Window.scheduler 只讀

返回與當前上下文關聯的 Scheduler 物件。這是使用優先順序任務排程 API 的入口點。

Window.screen 只讀

返回對與視窗關聯的 screen 物件的引用。

Window.screenXWindow.screenLeft 只讀

這兩個屬性都返回使用者瀏覽器視口左邊界到螢幕左側的水平距離。

Window.screenYWindow.screenTop 只讀

這兩個屬性都返回使用者瀏覽器視口上邊界到螢幕頂部的垂直距離。

Window.scrollbars 只讀

返回 scrollbars 物件。

Window.scrollMaxX 非標準 只讀

視窗可水平滾動的最大偏移量,即文件寬度減去視口寬度。

Window.scrollMaxY 非標準 只讀

視窗可垂直滾動的最大偏移量(即文件高度減去視口高度)。

Window.scrollX 只讀

返回文件已經水平滾動的畫素數。

Window.scrollY 只讀

返回文件已經垂直滾動的畫素數。

Window.self 只讀

返回對 window 物件本身的引用。

Window.sessionStorage

返回對會話儲存物件的引用,用於儲存只能由建立它的源訪問的資料。

Window.sharedStorage 只讀 實驗性 安全上下文

返回當前源的 WindowSharedStorage 物件。這是使用 Shared Storage API 向共享儲存寫入資料的主要入口點。

Window.speechSynthesis 只讀

返回一個 SpeechSynthesis 物件,該物件是使用 Web Speech API 語音合成功能的入口點。

Window.statusbar 只讀

返回 statusbar 物件。

Window.toolbar 只讀

返回 toolbar 物件。

Window.top 只讀

返回對視窗層次結構中最頂層視窗的引用。此屬性為只讀。

Window.trustedTypes 只讀

返回與全域性物件關聯的 TrustedTypePolicyFactory 物件,提供使用 Trusted Types API 的入口點。

Window.viewport 實驗性 只讀

返回一個 Viewport 物件例項,該例項提供有關裝置視口當前狀態的資訊。

Window.visualViewport 只讀

返回一個 VisualViewport 物件,表示給定視窗的視覺視口。

Window.window 只讀

返回對當前視窗的引用。

window[0]window[1]

返回對框架中 window 物件的引用。有關更多詳細資訊,請參閱 Window.frames

命名屬性

文件中的某些元素也作為視窗屬性暴露出來

  • 對於每個 <embed><form><iframe><img><object> 元素,如果其 name 非空,則會暴露出來。例如,如果文件包含 <form name="my_form">,那麼 window["my_form"](及其等效的 window.my_form)會返回對該元素的引用。
  • 對於每個 HTML 元素,如果其 id 非空,則會暴露出來。

如果一個屬性對應單個元素,則直接返回該元素。如果屬性對應多個元素,則返回一個包含所有這些元素的 HTMLCollection。如果任何元素是可導航的 <iframe><object>,則返回第一個此類 iframe 的 contentWindow

已廢棄的屬性

Window.event 已廢棄 只讀

返回當前事件,即當前由 JavaScript 程式碼上下文處理的事件,如果當前沒有事件被處理,則為 undefined。應儘可能使用直接傳遞給事件處理程式的 Event 物件。

Window.external 已廢棄 只讀

返回一個包含用於向瀏覽器新增外部搜尋提供程式功能的物件的物件。

Window.orientation 已廢棄 只讀

返回視口相對於裝置自然方向的方向度數(以 90 度為增量)。

Window.status 已廢棄

獲取/設定瀏覽器底部狀態列中的文字。

例項方法

此介面從 EventTarget 介面繼承方法。

Window.atob()

解碼一個使用 base-64 編碼的資料字串。

Window.alert()

顯示一個警告對話方塊。

Window.blur() 已廢棄

使視窗失去焦點。

Window.btoa()

從一個二進位制資料字串建立一個 base-64 編碼的 ASCII 字串。

Window.cancelAnimationFrame()

使您能夠取消先前使用 Window.requestAnimationFrame 排程的回撥。

Window.cancelIdleCallback()

使您能夠取消先前使用 Window.requestIdleCallback 排程的回撥。

Window.clearInterval()

取消使用 Window.setInterval() 設定的重複執行。

Window.clearTimeout()

取消使用 Window.setTimeout() 設定的延遲執行。

Window.close()

關閉當前視窗。

Window.confirm()

顯示一個帶有訊息的對話方塊,需要使用者響應。

Window.createImageBitmap()

接受多種不同的影像源,並返回一個解析為 ImageBitmapPromise。可選地,源影像可以裁剪為起始於 (sx, sy)、寬度為 sw、高度為 sh 的畫素矩形。

Window.dump() 非標準

向控制檯寫入一條訊息。

Window.fetch()

開始從網路獲取資源的過程。

Window.fetchLater() 實驗性

建立一個延遲獲取請求,該請求在頁面導航離開時(被銷燬或進入bfcache)或在提供的 activateAfter 超時後傳送——以先到者為準。

Window.find() 非標準

在視窗中搜索給定的字串。

Window.focus()

將焦點設定在當前視窗上。

Window.getComputedStyle()

獲取指定元素的計算樣式。計算樣式表示元素所有 CSS 屬性的計算值。

Window.getDefaultComputedStyle() 非標準

獲取指定元素的預設計算樣式,忽略作者樣式表。

Window.getScreenDetails() 實驗性 安全上下文

返回一個 Promise,該 Promise 會兌現為一個 ScreenDetails 物件例項,表示使用者裝置上所有可用螢幕的詳細資訊。

Window.getSelection()

返回表示所選專案的選擇物件。

Window.matchMedia()

返回一個表示指定媒體查詢字串的 MediaQueryList 物件。

Window.moveBy()

將當前視窗移動指定的量。

Window.moveTo()

將視窗移動到指定的座標。

Window.open()

開啟一個新視窗。

Window.postMessage()

提供一種安全的方式,讓一個視窗向另一個視窗傳送資料字串,這兩個視窗不必在同一域內。

Window.print()

開啟列印對話方塊以列印當前文件。

Window.prompt()

返回使用者在提示對話方塊中輸入的文字。

Window.queryLocalFonts() 實驗性 安全上下文

返回一個 Promise,該 Promise 會兌現為一個表示本地可用字型的 FontData 物件陣列。

Window.queueMicrotask()

將一個微任務排隊,以便在控制權返回瀏覽器事件迴圈之前的安全時間執行。

Window.reportError()

報告指令碼中的一個錯誤,模擬一個未處理的異常。

Window.requestAnimationFrame()

告訴瀏覽器動畫正在進行中,請求瀏覽器為下一個動畫幀排程視窗的重繪。

Window.requestIdleCallback()

允許在瀏覽器空閒期間排程任務。

Window.resizeBy()

將當前視窗按一定量調整大小。

Window.resizeTo()

動態調整視窗大小。

Window.scroll()

將視窗滾動到文件中的特定位置。

Window.scrollBy()

將視窗中的文件按給定的量滾動。

Window.scrollByLines() 非標準

將文件按給定的行數滾動。

Window.scrollByPages() 非標準

將當前文件按指定的頁數滾動。

Window.scrollTo()

滾動到文件中的一組特定座標。

Window.setInterval()

排程一個函式,每當經過給定的毫秒數時執行一次。

Window.setTimeout()

排程一個函式在給定的時間量後執行。

Window.showDirectoryPicker() 實驗性 安全上下文

顯示一個目錄選擇器,允許使用者選擇一個目錄。

Window.showOpenFilePicker() 實驗性 安全上下文

顯示一個檔案選擇器,允許使用者選擇一個或多個檔案。

Window.showSaveFilePicker() 實驗性 安全上下文

顯示一個檔案選擇器,允許使用者儲存一個檔案。

Window.sizeToContent() 非標準

根據視窗內容調整視窗大小。

Window.stop()

此方法停止視窗載入。

Window.structuredClone()

使用結構化克隆演算法建立給定值的深層克隆

已廢棄的方法

Window.captureEvents() 已廢棄

註冊視窗以捕獲指定型別的所有事件。

Window.clearImmediate() 非標準 已廢棄

取消使用 setImmediate() 設定的重複執行。

Window.releaseEvents() 已廢棄

釋放視窗對特定型別事件的捕獲。

Window.requestFileSystem() 非標準 已廢棄

讓網站或應用獲得對自己使用的沙箱檔案系統的訪問許可權。

Window.setImmediate() 非標準 已廢棄

在瀏覽器完成其他繁重任務後執行一個函式。

Window.setResizable() 非標準 已廢棄

不執行任何操作(無操作)。為與 Netscape 4.x 的向後相容而保留。

Window.webkitConvertPointFromNodeToPage() 非標準 已廢棄

將一個 WebKitPoint 從節點的座標系統轉換到頁面的座標系統。

Window.webkitConvertPointFromPageToNode() 非標準 已廢棄

將一個 WebKitPoint 從頁面的座標系統轉換到節點的座標系統。

事件

使用 addEventListener() 或透過為此介面的 oneventname 屬性分配事件監聽器來監聽這些事件。除了下面列出的事件外,許多事件可以從視窗物件中包含的 Document 中冒泡上來。

error

當資源載入失敗或無法使用時觸發。例如,如果指令碼執行錯誤或影像找不到或無效。

languagechange

當用戶的首選語言更改時,在全域性範圍物件上觸發。

resize

當視窗大小被調整時觸發。

storage

當儲存區域(localStoragesessionStorage)在另一個文件的上下文中被修改時觸發。

連線事件

offline

當瀏覽器失去網路訪問許可權且 navigator.onLine 的值切換為 false 時觸發。

online

當瀏覽器獲得網路訪問許可權且 navigator.onLine 的值切換為 true 時觸發。

裝置方向事件

devicemotion 安全上下文

以固定間隔觸發,指示裝置接收到的物理加速度和旋轉速率(如果可用)。

deviceorientation 安全上下文

當磁力計方向感測器有關於裝置當前方向與地球座標系相比的新資料時觸發。

deviceorientationabsolute 安全上下文

當磁力計方向感測器有關於裝置當前絕對方向與地球座標系相比的新資料時觸發。

焦點事件

blur

當一個元素失去焦點時觸發。

focus

當一個元素獲得焦點時觸發。

遊戲手柄事件

gamepadconnected

當瀏覽器檢測到遊戲手柄已連線或首次使用遊戲手柄的按鈕/軸時觸發。

gamepaddisconnected

當瀏覽器檢測到遊戲手柄已斷開連線時觸發。

歷史記錄事件

hashchange

當 URL 的片段識別符號(以 # 符號開頭並跟隨的部分)發生變化時觸發。

pagehide

當瀏覽器在切換到會話歷史中的另一個文件時隱藏當前文件時傳送。例如,當用戶點選“後退”按鈕或點選“前進”按鈕在會話歷史中移動時會發生這種情況。

pagereveal

當文件首次呈現時觸發,無論是在從網路載入新文件時,還是在啟用文件時(從往返快取(bfcache)或預渲染)。

pageshow

當瀏覽器因導航任務而使文件可見時傳送,不僅包括頁面首次載入時,還包括使用者在同一標籤頁內導航到其他頁面後又導航回來的情況。

pageswap

當文件因導航即將解除安裝時觸發。

popstate

當活動歷史記錄條目發生變化時觸發。

載入和解除安裝事件

beforeunload

當視窗、文件及其資源即將被解除安裝時觸發。

load

當整個頁面載入完成時觸發,包括所有依賴資源,如樣式表和影像。

unload 已廢棄

當文件或子資源被解除安裝時觸發。

清單事件

appinstalled

當瀏覽器成功將頁面安裝為應用程式時觸發。

beforeinstallprompt

當用戶即將被提示安裝 Web 應用程式時觸發。

訊息事件

message

當視窗接收到訊息時觸發,例如來自另一個瀏覽上下文對 Window.postMessage() 的呼叫。

messageerror

Window 物件接收到無法反序列化的訊息時觸發。

afterprint

在相關文件開始列印或列印預覽關閉後觸發。

beforeprint

在相關文件即將列印或預覽列印時觸發。

Promise 拒絕事件

rejectionhandled

每當一個 JavaScript Promise 被拒絕時傳送,無論是否有處理程式來捕獲該拒絕。

unhandledrejection

當一個 JavaScript Promise 被拒絕但沒有處理程式來捕獲該拒絕時傳送。

滾動事件

scrollsnapchange 實驗性

在滾動操作結束時,當選擇了新的滾動捕捉目標時,在滾動容器上觸發。

scrollsnapchanging 實驗性

當瀏覽器確定一個新的滾動捕捉目標即將生效時,在滾動容器上觸發,即它將在當前滾動手勢結束時被選中。

已廢棄的事件

orientationchange 已廢棄

當裝置的方向發生變化時觸發。

vrdisplayactivate 已廢棄 非標準

當顯示器能夠被呈現時觸發。

vrdisplayconnect 已廢棄 非標準

當相容的 VR 裝置連線到計算機時觸發。

vrdisplaydisconnect 已廢棄 非標準

當相容的 VR 裝置從計算機斷開時觸發。

vrdisplaydeactivate 已廢棄 非標準

當顯示器不再能被呈現時觸發。

vrdisplaypresentchange 已廢棄 非標準

當 VR 裝置的呈現狀態發生變化時觸發——即從呈現變為不呈現,或反之亦然。

冒泡事件

並非所有冒泡的事件都能到達 Window 物件。只有以下事件可以,並且可以在 Window 物件上監聽

介面

參見 DOM 參考

監聽 Window 上的事件

HTML 元素有三種監聽事件的方式

  • 使用 EventTarget.addEventListener 方法向元素新增事件監聽器。
  • 在 JavaScript 中為元素的 oneventname 屬性分配一個事件處理程式。
  • 在 HTML 中為元素新增一個以 on 為字首的屬性。

要監聽 Window 物件的事件,通常只能使用前兩種方法,因為 Window 沒有對應的 HTML 元素。但是,有一組特定的事件,其監聽器可以使用第二種或第三種方法新增到 Window 文件所屬的 <body>(或已廢棄的 <frameset>)元素上。這些事件是:

  • afterprint
  • beforeprint
  • beforeunload
  • blur
  • error
  • focus
  • hashchange
  • languagechange
  • load
  • message
  • messageerror
  • offline
  • online
  • pagehide
  • pagereveal
  • pageshow
  • pageswap
  • popstate
  • rejectionhandled
  • resize
  • scroll
  • storage
  • unhandledrejection
  • unload

這意味著以下內容是完全等價的:

js
window.onresize = (e) => console.log(e.currentTarget);
document.body.onresize = (e) => console.log(e.currentTarget);
html
<body onresize="console.log(event.currentTarget)"></body>

在所有三種情況下,你都會看到 Window 物件被記錄為 currentTarget

規範

規範
HTML
# the-window-object

瀏覽器相容性