Window
Baseline 廣泛可用 *
Window 介面表示一個包含DOM文件的視窗,其 document 屬性指向視窗中載入的DOM 文件。
可以使用 document.defaultView 屬性來獲取指定文件的視窗。
全域性變數 window 表示指令碼正在其中執行的視窗,它被暴露給 JavaScript 程式碼。
Window 介面是各種函式、名稱空間、物件和建構函式的大本營,它們不一定與使用者介面的視窗概念直接相關。然而,Window 介面是一個合適的地方,可以包含這些需要全域性可用的專案。其中許多內容都記錄在 JavaScript 參考和 DOM 參考中。
在標籤頁式瀏覽器中,每個標籤頁都由其自己的 Window 物件表示;在特定標籤頁內執行的 JavaScript 程式碼所看到的全域性 window 始終代表程式碼正在執行的標籤頁。也就是說,即使在標籤頁式瀏覽器中,一些屬性和方法仍然適用於包含該標籤頁的整個視窗,例如 resizeTo() 和 innerHeight。通常,任何不能合理地應用於標籤頁的事物都將應用於視窗。
例項屬性
此介面從 EventTarget 介面繼承屬性。
注意,作為物件的屬性(例如,用於覆蓋內建元素的原型)在下面的單獨部分中列出。
Window.caches只讀 安全上下文-
返回與當前上下文關聯的
CacheStorage物件。此物件啟用了諸如為離線使用儲存資產以及生成對請求的自定義響應等功能。 Window.clientInformation只讀-
Window.navigator的別名。 Window.closed只讀-
此屬性指示當前視窗是否已關閉。
-
返回對當前文件上下文的
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_handler的client_mode值為focus-existing、navigate-new或navigate-existing啟動時,launchQueue提供了對LaunchQueue類的訪問,從而可以為 PWA 實現自定義的啟動導航處理。 Window.length只讀-
返回視窗中框架的數量。另請參閱
window.frames。 Window.localStorage只讀-
返回對本地儲存物件的引用,用於儲存只能由建立它的源訪問的資料。
Window.location-
獲取/設定視窗物件的位置或當前 URL。
Window.locationbar只讀-
返回 locationbar 物件。
-
返回 menubar 物件。
Window.mozInnerScreenX只讀 非標準-
返回視窗視口左上角的水平(X)座標,單位為螢幕座標。該值以 CSS 畫素報告。如果需要,可參考
nsIDOMWindowUtils中的mozScreenPixelsPerCSSPixel進行轉換以適應螢幕畫素。 Window.mozInnerScreenY只讀 非標準-
返回視窗視口左上角的垂直(Y)座標,單位為螢幕座標。該值以 CSS 畫素報告。如果需要,可參考
mozScreenPixelsPerCSSPixel進行轉換以適應螢幕畫素。 Window.name-
獲取/設定視窗的名稱。
-
返回當前
window關聯的Navigation物件。這是 Navigation API 的入口點。 -
返回對 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物件,其中包括timing和navigation屬性,每個屬性都是一個提供效能相關資料的物件。另請參閱使用導航計時以獲取更多資訊和示例。 Window.personalbar只讀-
返回 personalbar 物件。
Window.scheduler只讀-
返回與當前上下文關聯的
Scheduler物件。這是使用優先順序任務排程 API 的入口點。 Window.screen只讀-
返回對與視窗關聯的 screen 物件的引用。
Window.screenX和Window.screenLeft只讀-
這兩個屬性都返回使用者瀏覽器視口左邊界到螢幕左側的水平距離。
Window.screenY和Window.screenTop只讀-
這兩個屬性都返回使用者瀏覽器視口上邊界到螢幕頂部的垂直距離。
Window.scrollbars只讀-
返回 scrollbars 物件。
Window.scrollMaxX非標準 只讀-
視窗可水平滾動的最大偏移量,即文件寬度減去視口寬度。
Window.scrollMaxY非標準 只讀-
視窗可垂直滾動的最大偏移量(即文件高度減去視口高度)。
Window.scrollX只讀-
返回文件已經水平滾動的畫素數。
Window.scrollY只讀-
返回文件已經垂直滾動的畫素數。
Window.self只讀-
返回對 window 物件本身的引用。
Window.sessionStorage-
返回對會話儲存物件的引用,用於儲存只能由建立它的源訪問的資料。
-
返回當前源的
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()-
接受多種不同的影像源,並返回一個解析為
ImageBitmap的Promise。可選地,源影像可以裁剪為起始於 (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()實驗性 安全上下文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-
當儲存區域(
localStorage或sessionStorage)在另一個文件的上下文中被修改時觸發。
連線事件
裝置方向事件
devicemotion安全上下文-
以固定間隔觸發,指示裝置接收到的物理加速度和旋轉速率(如果可用)。
deviceorientation安全上下文-
當磁力計方向感測器有關於裝置當前方向與地球座標系相比的新資料時觸發。
deviceorientationabsolute安全上下文-
當磁力計方向感測器有關於裝置當前絕對方向與地球座標系相比的新資料時觸發。
焦點事件
遊戲手柄事件
gamepadconnected-
當瀏覽器檢測到遊戲手柄已連線或首次使用遊戲手柄的按鈕/軸時觸發。
gamepaddisconnected-
當瀏覽器檢測到遊戲手柄已斷開連線時觸發。
歷史記錄事件
hashchange-
當 URL 的片段識別符號(以
#符號開頭並跟隨的部分)發生變化時觸發。 pagehide-
當瀏覽器在切換到會話歷史中的另一個文件時隱藏當前文件時傳送。例如,當用戶點選“後退”按鈕或點選“前進”按鈕在會話歷史中移動時會發生這種情況。
pagerevealpageshow-
當瀏覽器因導航任務而使文件可見時傳送,不僅包括頁面首次載入時,還包括使用者在同一標籤頁內導航到其他頁面後又導航回來的情況。
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 物件上監聽
abortauxclickbeforeinputbeforematchbeforetogglecancelcanplaycanplaythroughchangeclickclosecontextlostcontextmenucontextrestoredcopycuechangecutdblclickdragdragenddragenterdragleavedragoverdragstartdropdurationchangeemptiedendedformdatainputinvalidkeydownkeypresskeyuploadeddataloadedmetadataloadstartmousedownmouseentermouseleavemousemovemouseoutmouseovermouseuppastepauseplayplayingprogressratechangeresetscrollendsecuritypolicyviolationseekedseekingselectslotchangestalledsubmitsuspendtimeupdatetogglevolumechangewaitingwheel
介面
參見 DOM 參考。
監聽 Window 上的事件
HTML 元素有三種監聽事件的方式
- 使用
EventTarget.addEventListener方法向元素新增事件監聽器。 - 在 JavaScript 中為元素的
oneventname屬性分配一個事件處理程式。 - 在 HTML 中為元素新增一個以
on為字首的屬性。
要監聽 Window 物件的事件,通常只能使用前兩種方法,因為 Window 沒有對應的 HTML 元素。但是,有一組特定的事件,其監聽器可以使用第二種或第三種方法新增到 Window 文件所屬的 <body>(或已廢棄的 <frameset>)元素上。這些事件是:
afterprintbeforeprintbeforeunloadblurerrorfocushashchangelanguagechangeloadmessagemessageerrorofflineonlinepagehidepagerevealpageshowpageswappopstaterejectionhandledresizescrollstorageunhandledrejectionunload
這意味著以下內容是完全等價的:
window.onresize = (e) => console.log(e.currentTarget);
document.body.onresize = (e) => console.log(e.currentTarget);
<body onresize="console.log(event.currentTarget)"></body>
在所有三種情況下,你都會看到 Window 物件被記錄為 currentTarget。
規範
| 規範 |
|---|
| HTML # the-window-object |
瀏覽器相容性
載入中…