window
對象指當前的瀏覽器窗口。target
屬性使用 (1) window.closed
屬性返回一個布爾值,表示窗口是否關閉html
(2) window.opener
屬性表示打開當前窗口的父窗口。若是當前窗口沒有父窗口(即直接在地址欄輸入打開),則返回null
java
window.self
和window.window
屬性都指向窗口自己。這兩個屬性只讀window.self === window // true window.window === window // true
window.frames
屬性返回一個相似數組的對象,成員爲頁面內全部框架窗口,包括frame
元素和iframe
元素。window.frames[0]
表示頁面中第一個框架窗口iframe
元素設置了id
或name
屬性,那麼就能夠用屬性值,引用這個iframe
窗口。好比<iframe name="myIFrame">
能夠用frames['myIFrame']
或者frames.myIFrame
來引用frames
屬性其實是window
對象的別名window.length
屬性返回當前網頁包含的框架總數。若是當前網頁不包含frame
和iframe
元素,那麼window.length
就返回0
frames === window // true window.frames.length === window.length // true
window.frameElement
屬性主要用於當前窗口嵌在另外一個網頁的狀況(嵌入<object>
、<iframe>
或<embed>
元素),返回當前窗口所在的那個元素節點。若是當前窗口是頂層窗口,或者所嵌入的那個網頁不是同源的,該屬性返回null
。// HTML 代碼以下 // <iframe src="about.html"></iframe> // 下面的腳本在 about.html 裏面 var frameEl = window.frameElement; if (frameEl) { frameEl.src = 'other.html'; } 上面代碼中,frameEl變量就是<iframe>元素。
window.top
屬性指向最頂層窗口,主要用於在子窗口裏面獲取頂層的父窗口。 window.parent
屬性指向父窗口。若是當前窗口沒有父窗口,window.parent
指向自身window.devicePixelRatio
屬性返回一個數值,表示一個 CSS 像素的大小與一個物理像素的大小之間的比率。也就是說,它表示一個 CSS 像素由多少個物理像素組成。它能夠用於判斷用戶的顯示環境,若是這個比率較大,就表示用戶正在使用高清屏幕,所以能夠顯示較大像素的圖片window
對象的位置信息和大小信息 (1)window.screenX
和window.screenY
屬性,返回瀏覽器窗口左上角相對於當前屏幕左上角的水平距離和垂直距離(單位像素)。這兩個屬性只讀android
(2)window.innerHeight
和window.innerWidth
屬性,返回網頁在當前窗口中可見部分的高度和寬度,即「視口」(viewport)的大小(單位像素)。這兩個屬性只讀小程序
(3)window.outerHeight
和window.outerWidth
屬性返回瀏覽器窗口的高度和寬度,包括瀏覽器菜單和邊框(單位像素)。這兩個屬性只讀數組
(4)window.scrollX
屬性返回頁面的水平滾動距離,window.scrollY
屬性返回頁面的垂直滾動距離,單位都爲像素。這兩個屬性只讀瀏覽器
(5)window.pageXOffset
屬性和window.pageYOffset
屬性,是window.scrollX
和window.scrollY
別名cookie
window.isSecureContext
屬性返回一個布爾值,表示當前窗口是否處在加密環境。若是是 HTTPS 協議,就是true
,不然就是false
window.confirm()
方法彈出的對話框,除了提示信息以外,只有「肯定」和「取消」兩個按鈕,每每用來徵詢用戶是否贊成window.prompt()
方法彈出的對話框,提示文字的下方,還有一個輸入框,要求用戶輸入信息,並有「肯定」和「取消」兩個按鈕。它每每用來獲取用戶輸入的數據window.open
方法用於新建另外一個瀏覽器窗口,相似於瀏覽器菜單的新建窗口選項。它會返回新窗口的引用,若是沒法新建窗口,則返回null
window.open(url, windowName, [windowFeatures])
url
:字符串,表示新窗口的網址。若是省略,默認網址就是about:blank
。windowName
:字符串,表示新窗口的名字。若是該名字的窗口已經存在,則佔用該窗口,再也不新建窗口。若是省略,就默認使用_blank
,表示新建一個沒有名字的窗口。windowFeatures
:字符串,內容爲逗號分隔的鍵值對(詳見下文),表示新窗口的參數,好比有沒有提示欄、工具條等等。若是省略,則默認打開一個完整 UI 的新窗口。若是新建的是一個已經存在的窗口,則該參數不起做用,瀏覽器沿用之前窗口的參數。window.close
方法用於關閉當前窗口,通常只用來關閉window.open
方法新建的窗口window.stop()
方法徹底等同於單擊瀏覽器的中止按鈕,會中止加載圖像、視頻等正在或等待加載的對象window.moveTo()
方法用於移動瀏覽器窗口到指定位置。它接受兩個參數,分別是窗口左上角距離屏幕左上角的水平距離和垂直距離,單位爲像素window.moveBy
方法將窗口移動到一個相對位置。它接受兩個參數,分佈是窗口左上角向右移動的水平距離和向下移動的垂直距離,單位爲像素window.resizeTo()
方法用於縮放窗口到指定大小。window.scrollTo
方法用於將文檔滾動到指定位置。它接受兩個參數,表示滾動後位於窗口左上角的頁面座標 window.scrollTo(options)
top
:滾動後頁面左上角的垂直座標,即 y 座標。left
:滾動後頁面左上角的水平座標,即 x 座標。behavior
:字符串,表示滾動的方式,有三個可能值(smooth
、instant
、auto
),默認值爲auto
window.print
方法會跳出打印對話框,與用戶點擊菜單裏面的「打印」命令效果相同。window.focus()
方法會激活窗口,使其得到焦點,出如今其餘窗口的前面window.blur()
方法將焦點從窗口移除window.getSelection
方法返回一個Selection
對象,表示用戶如今選中的文本window.getComputedStyle()
方法接受一個元素節點做爲參數,返回一個包含該元素的最終樣式信息的對象window.matchMedia()
方法用來檢查 CSS 的mediaQuery
語句 window.navigator
屬性指向一個包含瀏覽器信息的 Navigator 對象。腳本經過這個屬性瞭解用戶使用的是哪種瀏覽器session
navigator.userAgent
屬性返回瀏覽器的 User Agent 字符串,表示瀏覽器的廠商和版本信息navigator.userAgent // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"
經過userAgent
屬性識別瀏覽器,用戶能夠改變這個字符串經過userAgent
能夠大體準確地識別手機瀏覽器,方法就是測試是否包含mobi
字符串/mobi|android|touch|mini/i.test(ua)
框架
var ua = navigator.userAgent.toLowerCase(); if (/mobi/i.test(ua)) { // 手機瀏覽器 } else { // 非手機瀏覽器 }
Navigator.plugins
屬性返回一個相似數組的對象,成員是 Plugin 實例對象,表示瀏覽器安裝的插件,好比 Flash、ActiveX 等var pluginsLength = navigator.plugins.length; for (var i = 0; i < pluginsLength; i++) { console.log(navigator.plugins[i].name); console.log(navigator.plugins[i].filename); console.log(navigator.plugins[i].description); console.log(navigator.plugins[i].version); }
Navigator.platform
屬性返回用戶的操做系統信息,好比MacIntel
、Win32
、Linux x86_64
等navigator.platform // "Linux x86_64"
navigator.onLine
屬性返回一個布爾值,表示用戶當前在線仍是離線(瀏覽器斷線)。 有時,瀏覽器能夠鏈接局域網,可是局域網不能連通外網。這時,有的瀏覽器的onLine
屬性會返回true
,因此不能假定只要是true
,用戶就必定能訪問互聯網。不過,若是是false
,能夠判定用戶必定離線。函數
navigator.onLine // true
Navigator.language
屬性返回一個字符串,表示瀏覽器的首選語言。該屬性只讀。Navigator.languages
屬性返回一個數組,表示用戶能夠接受的語言。 navigator.language // "en" navigator.languages // ["en-US", "en", "zh-CN", "zh", "zh-TW"]
Navigator.geolocation
屬性返回一個 Geolocation 對象,包含用戶地理位置的信息。注意,該 API 只有在 HTTPS 協議下可用,不然調用下面方法時會報錯watchPosition()
方法指定的監聽函數Navigator.cookieEnabled
屬性返回一個布爾值,表示瀏覽器的 Cookie 功能是否打開 八、Navigator.javaEnabled()
方法返回一個布爾值,表示瀏覽器是否能運行 Java Applet 小程序
window.history
屬性指向 History 對象,它表示當前窗口的瀏覽歷史
(1)History.length
:當前窗口訪問過的網址數量
(2)History.state
:History 堆棧最上層的狀態值
History.back()
:移動到上一個網址,等同於點擊瀏覽器的後退鍵。對於第一個訪問的網址,該方法無效果。History.forward()
:移動到下一個網址,等同於點擊瀏覽器的前進鍵。對於最後一個訪問的網址,該方法無效果。History.go()
:接受一個整數做爲參數,以當前網址爲基準,移動到參數指定的網址,好比go(1)
至關於forward()
,go(-1)
至關於back()
。若是參數超過實際存在的網址範圍,該方法無效果;若是不指定參數,默認參數爲0
,至關於刷新當前頁面history.go(0)
至關於刷新當前頁面。History.pushState()
方法用於在歷史中添加一條記錄window.history.pushState(state, title, url)
state
:一個與添加的記錄相關聯的狀態對象,主要用於popstate
事件。該事件觸發時,該對象會傳入回調函數。也就是說,瀏覽器會將這個對象序列化之後保留在本地,從新載入這個頁面的時候,能夠拿到這個對象。若是不須要這個對象,此處能夠填null
。title
:新頁面的標題。可是,如今全部瀏覽器都忽視這個參數,因此這裏能夠填空字符串。url
:新的網址,必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。History.replaceState()
方法用來修改 History 對象的當前記錄,其餘都與pushState()
方法如出一轍history.pushState({page: 1}, 'title 1', '?page=1') // URL 顯示爲 http://example.com/example.html?page=1 history.pushState({page: 2}, 'title 2', '?page=2'); // URL 顯示爲 http://example.com/example.html?page=2 history.replaceState({page: 3}, 'title 3', '?page=3'); // URL 顯示爲 http://example.com/example.html?page=3 history.back() // URL 顯示爲 http://example.com/example.html?page=1 history.back() // URL 顯示爲 http://example.com/example.html history.go(2) // URL 顯示爲 http://example.com/example.html?page=3
每當同一個文檔的瀏覽歷史(即history
對象)出現變化時,就會觸發popstate
事件
僅僅調用pushState()
方法或replaceState()
方法 ,並不會觸發該事件,只有用戶點擊瀏覽器倒退按鈕和前進按鈕,或者使用 JavaScript 調用History.back()
、History.forward()
、History.go()
方法時纔會觸發。另外,該事件只針對同一個文檔,若是瀏覽歷史的切換,致使加載不一樣的文檔,該事件也不會觸發
window.onpopstate = function (event) { console.log('location: ' + document.location); console.log('state: ' + JSON.stringify(event.state)); }; // 或者 window.addEventListener('popstate', function(event) { console.log('location: ' + document.location); console.log('state: ' + JSON.stringify(event.state)); });
回調函數的參數是一個event
事件對象,它的state
屬性指向pushState
和replaceState
方法爲當前 URL 所提供的狀態對象(即這兩個方法的第一個參數)。上面代碼中的event.state
,就是經過pushState
和replaceState
方法,爲當前 URL 綁定的state
對象
var currentState = history.state;
Storage 接口用於腳本在瀏覽器保存數據。兩個對象部署了這個接口:window.sessionStorage
和window.localStorage
Storage.setItem()
方法用於存入數據。它接受兩個參數,第一個是鍵名,第二個是保存的數據window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');
Storage.getItem()
方法用於讀取數據。它只有一個參數,就是鍵名。若是鍵名不存在,該方法返回null
window.sessionStorage.getItem('key')
window.localStorage.getItem('key')
Storage.clear()
方法用於清除全部保存的數據。該方法的返回值是undefined
。window.sessionStorage.clear()
window.localStorage.clear()
Storage.key()
接受一個整數做爲參數(從零開始),返回該位置對應的鍵值。window.sessionStorage.setItem('key', 'value'); window.sessionStorage.key(0) // "key" for (var i = 0; i < window.localStorage.length; i++) { console.log(localStorage.key(i)); }
window.addEventListener('storage', onStorageChange);
監聽函數接受一個event
實例對象做爲參數。這個實例對象繼承了 StorageEvent 接口,有幾個特有的屬性,都是隻讀屬性。
StorageEvent.key
:字符串,表示發生變更的鍵名。若是 storage 事件是由clear()
方法引發,該屬性返回null
。StorageEvent.newValue
:字符串,表示新的鍵值。若是 storage 事件是由clear()
方法或刪除該鍵值對引起的,該屬性返回null
。Storage.oldValue
:字符串,表示舊的鍵值。若是該鍵值對是新增的,該屬性返回null
。Storage.storageArea
:對象,返回鍵值對所在的整個對象。也說是說,能夠從這個屬性上面拿到當前域名儲存的全部鍵值對。Storage.url
:字符串,表示原始觸發 storage 事件的那個網頁的網址。function onStorageChange(e) { console.log(e.key); } window.addEventListener('storage', onStorageChange);