BOM
BOM - Browser Object Model ( 瀏覽器對象模型 )，BOM 主要用於操作與管理瀏覽器相關狀態。BOM 由以 window 對象為主以及其他常用對象如 navigator 、location 、history 、screen 、document 等等功能各異的對象組成。BOM 相關對象提供了很多方法與屬性以便於操作瀏覽器，但由於各瀏覽器標准不同，導致各瀏覽器 BOM 相關對象 api 不盡相同，以下主要以 google 瀏覽器為例，記錄與分享 BOM 相關常見對象的屬性與方法。
BOM 常用 API
navigator 對象屬性與方法
// Object.getOwnPropertyDescriptors(Navigator.prototype) appCodeName : {set: undefined, enumerable: true, configurable: true, get: ƒ} appName : {set: undefined, enumerable: true, configurable: true, get: ƒ} appVersion : {set: undefined, enumerable: true, configurable: true, get: ƒ} cookieEnabled : {set: undefined, enumerable: true, configurable: true, get: ƒ} deviceMemory : {set: undefined, enumerable: true, configurable: true, get: ƒ} doNotTrack : {set: undefined, enumerable: true, configurable: true, get: ƒ} hardwareConcurrency : {set: undefined, enumerable: true, configurable: true, get: ƒ} language : {set: undefined, enumerable: true, configurable: true, get: ƒ} maxTouchPoints : {set: undefined, enumerable: true, configurable: true, get: ƒ} languages : {set: undefined, enumerable: true, configurable: true, get: ƒ} onLine : {set: undefined, enumerable: true, configurable: true, get: ƒ} platform : {set: undefined, enumerable: true, configurable: true, get: ƒ} product : {set: undefined, enumerable: true, configurable: true, get: ƒ} productSub : {set: undefined, enumerable: true, configurable: true, get: ƒ} userAgent : {set: undefined, enumerable: true, configurable: true, get: ƒ} vendor : {set: undefined, enumerable: true, configurable: true, get: ƒ} vendorSub : {set: undefined, enumerable: true, configurable: true, get: ƒ} plugins : {set: undefined, enumerable: true, configurable: true, get: ƒ} clipboard : {set: undefined, enumerable: true, configurable: true, get: ƒ} connection : {set: undefined, enumerable: true, configurable: true, get: ƒ} credentials : {set: undefined, enumerable: true, configurable: true, get: ƒ} geolocation : {set: undefined, enumerable: true, configurable: true, get: ƒ} keyboard : {set: undefined, enumerable: true, configurable: true, get: ƒ} locks : {set: undefined, enumerable: true, configurable: true, get: ƒ} mediaCapabilities : {set: undefined, enumerable: true, configurable: true, get: ƒ} mediaDevices : {set: undefined, enumerable: true, configurable: true, get: ƒ} mediaSession : {set: undefined, enumerable: true, configurable: true, get: ƒ} mimeTypes : {set: undefined, enumerable: true, configurable: true, get: ƒ} permissions : {set: undefined, enumerable: true, configurable: true, get: ƒ} presentation : {set: undefined, enumerable: true, configurable: true, get: ƒ} serviceWorker : {set: undefined, enumerable: true, configurable: true, get: ƒ} storage : {set: undefined, enumerable: true, configurable: true, get: ƒ} usb : {set: undefined, enumerable: true, configurable: true, get: ƒ} userActivation : {set: undefined, enumerable: true, configurable: true, get: ƒ} xr : {set: undefined, enumerable: true, configurable: true, get: ƒ}
clearAppBadge : {writable: true, enumerable: true, configurable: true, value: ƒ} getBattery : {writable: true, enumerable: true, configurable: true, value: ƒ} getGamepads : {writable: true, enumerable: true, configurable: true, value: ƒ} getInstalledRelatedApps : {writable: true, enumerable: true, configurable: true, value: ƒ} getUserMedia : {writable: true, enumerable: true, configurable: true, value: ƒ} javaEnabled : {writable: true, enumerable: true, configurable: true, value: ƒ} registerProtocolHandler : {writable: true, enumerable: true, configurable: true, value: ƒ} requestMIDIAccess : {writable: true, enumerable: true, configurable: true, value: ƒ} requestMediaKeySystemAccess : {writable: true, enumerable: true, configurable: true, value: ƒ} sendBeacon : {writable: true, enumerable: true, configurable: true, value: ƒ} setAppBadge : {writable: true, enumerable: true, configurable: true, value: ƒ} unregisterProtocolHandler : {writable: true, enumerable: true, configurable: true, value: ƒ} vibrate : {writable: true, enumerable: true, configurable: true, value: ƒ}
navigator 各屬性與描述：
mediaDevices 對象示例：
<!-- 假設頁面中有以下元素 --> <video id="video" width="200px"> <source src="./libs/video/FF_cg.mp4"></source> video </video> <p id="txt"></p>
// javascript 部分，開啟攝像頭並使用video播放 var txt = document.getElementById('txt')
var video = document.getElementById('video') if (navigator.mediaDevices.getUserMedia) { // 新 API navigator.mediaDevices.getUserMedia({video : {width: 1000, height: 1000}}).then(success).catch(error); } else if (navigator.webkitGetUserMedia) { //webkit 瀏覽器 navigator.webkitGetUserMedia({video : {width: 1000, height: 1000}},success, error) } else if (navigator.mozGetUserMedia) { //firfox 瀏覽器 navigator.mozGetUserMedia({video : {width: 1000, height: 1000}}, success, error); } else if (navigator.getUserMedia) { //舊版 API navigator.getUserMedia({video : {width: 1000, height: 1000}}, success, error); } function success(stream) { video.srcObject = stream; video.play(); } function error(error) { console.log(`訪問用戶媒體設備失敗 ${error.name}, ${error.message}`); }
navigator 對象方法：
1.navigator.getBattery()
功能：獲取系統的電量信息，返回一個battery的promise對象，然后resolve后得到BatteryManager對象，它提供了一些新的事件，以及方法供您監控電池的狀態。
語法：navigator.getBattery().then(funcRef)
參數：
- funcRef：回調函數
實例：
navigator.getBattery().then(function(battery) { function updateAllBatteryInfo(){ updateChargeInfo(); updateLevelInfo(); updateChargingInfo(); updateDischargingInfo(); } updateAllBatteryInfo(); battery.addEventListener('chargingchange', function(){ updateChargeInfo(); }); function updateChargeInfo(){ console.log("電池充電中? " + (battery.charging ? "是" : "否")); } battery.addEventListener('levelchange', function(){ updateLevelInfo(); }); function updateLevelInfo(){ console.log("電池電量: " + battery.level * 100 + "%"); } battery.addEventListener('chargingtimechange', function(){ updateChargingInfo(); }); function updateChargingInfo(){ console.log("電池充電時間: " + battery.chargingTime + "秒"); } battery.addEventListener('dischargingtimechange', function(){ updateDischargingInfo(); }); function updateDischargingInfo(){ console.log("電池放電時間: " + battery.dischargingTime + "秒"); } });
2.navigator.getGamepads()
功能：返回一個數組：第一個值為 null ，其他的值均為 Gamepad 對象，表示每一個與設備連接的游戲手柄。所以如果沒有連接任何游戲手柄，這個方法將只會返回 null。
語法：var arrayGP = navigator.getGamepads()
實例：
window.addEventListener("gamepadconnected", function(e) {
var gp = navigator.getGamepads()[e.gamepad.index];
console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
gp.index, gp.id,
gp.buttons.length, gp.axes.length);
});
3.navigator.javaEnabled()
功能：用來表明當前瀏覽器是否激活了Java。
語法：var isJavaEnabled = window.navigator.javaEnabled()
實例：
var isJavaEnabled = window.navigator.javaEnabled() isJavaEnabled?console.log('yes'):console.log('no')
4.navigator.registerProtocolHandler()
功能：用於讓web站點為自身注冊能用於打開或處理特定URL schemes（aka protocols）的功能。
語法：navigator.registerProtocolHandler(scheme, url, title)
參數：
- scheme：一個包含站點希望處理的協議的字符串。例如，你可以通過傳入 "sms" 來注冊處理SMS文本信息鏈接。
- url：處理器的URL，string類型。這個字符串應該包含一個"%s"的占位符，其會被將要受理的文檔的 escaped 鏈接所替換。這個鏈接可能是一個真實的URL，或者是一個電話號碼，郵件地址之類的。這個處理器的 URL 必須以 http 或者 https 協議標記作為開頭，最好是 https ，以滿足一些瀏覽器出於安全考慮的要求。
- title：一個用戶可理解的處理器標題。標題會展示給用戶，例如彈出對話框“允許這個站點處理[scheme]鏈接嗎？”或者在瀏覽器設置中列出注冊的處理器時。
實例：
// 出於安全考慮，registerProtocolHandler() 嚴格限制了允許注冊的協議標記。 // 以 web+ 作為前綴的方式可以注冊一個自定義的標記協議，至少要有5個字符的長度(包括 web+ 前綴)，而且只能使用小寫的ASCII字母作為名稱。 // 例如 web+elfpower ，如下面的示例所示。除此之外，還可以使用下文所列的白名單中的協議標記: // bitcoin ,geo ,im ,irc ,ircs ,magnet ,mailto ,mms ,news ,nntp ,openpgp4fpr ,sip ,sms ,smsto ,ssh ,tel ,urn ,webcal ,wtai ,xmpp // 如果你的網站地址是https://www.baidu.com/,你可以像這樣注冊一個作用於"web+elfpower"的處理器鏈接: navigator.registerProtocolHandler("web+elfpower","https://www.baidu.com/s?cl%s","elfpower handler");
5.navigator.sendBeacon()
功能：用於通過HTTP將少量數據異步傳輸到Web服務器。
語法：navigator.sendBeacon(url, data)
參數：
- url：url 參數表明 data 將要被發送到的網絡地址。
- data：data 參數是將要發送的 ArrayBufferView 或 Blob, DOMString 或者 FormData 類型的數據。
實例：
window.addEventListener('unload', logData, false);
function logData() {
navigator.sendBeacon("/log", analyticsData);
}
6.navigator.vibrate()
功能：使設備（有震動硬件）產生有頻率的震動。若設備不支持震動，該方法將無效。
語法：var successBool = window.navigator.vibrate(pattern)
參數：
- pattern：提供一個震動、暫停間隔的模式。每一個值表示交替震動或者暫停的毫秒數。你可以提供一個單個的值（震動一次的毫秒數）或者一個包含整數的數組來交替的震動、暫停、震動。
實例：
window.navigator.vibrate(200)
window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]);
screen 對象屬性與方法
// Object.getOwnPropertyDescriptors(Screen.prototype) availHeight : {set: undefined, enumerable: true, configurable: true, get: ƒ} availWidth : {set: undefined, enumerable: true, configurable: true, get: ƒ} availLeft : {set: undefined, enumerable: true, configurable: true, get: ƒ} availTop : {set: undefined, enumerable: true, configurable: true, get: ƒ} height : {set: undefined, enumerable: true, configurable: true, get: ƒ} width : {set: undefined, enumerable: true, configurable: true, get: ƒ} colorDepth : {set: undefined, enumerable: true, configurable: true, get: ƒ} pixelDepth : {set: undefined, enumerable: true, configurable: true, get: ƒ} orientation : {set: undefined, enumerable: true, configurable: true, get: ƒ}
console.log('返回窗口中垂直方向可用空間的像素值。',screen.availHeight)
console.log('返回窗口中水平方向可用空間的像素值。',screen.availWidth )
console.log('返回屏幕左邊邊界的第一個像素點。',screen.availLeft )
console.log('返回屏幕上邊邊界的第一個像素點。',screen.availTop )
console.log('返回屏幕以像素為單位的高度。',screen.height )
console.log('返回屏幕以像素為單位的寬度。',screen.width )
console.log('返回屏幕的色彩深度。',screen.colorDepth )
console.log('獲取屏幕的像素點。',screen.pixelDepth )
console.log('返回當前屏幕的轉向。',screen.orientation.type)
history 對象屬性與方法
// Object.getOwnPropertyDescriptors(History.prototype) scrollRestoration : {enumerable: true, configurable: true, get: ƒ, set: ƒ} length : {set: undefined, enumerable: true, configurable: true, get: ƒ} state : {set: undefined, enumerable: true, configurable: true, get: ƒ} back : {writable: true, enumerable: true, configurable: true, value: ƒ} go : {writable: true, enumerable: true, configurable: true, value: ƒ} forward : {writable: true, enumerable: true, configurable: true, value: ƒ} pushState : {writable: true, enumerable: true, configurable: true, value: ƒ} replaceState : {writable: true, enumerable: true, configurable: true, value: ƒ} constructor : {writable: true, enumerable: false, configurable: true, value: ƒ}
console.log('允許Web應用程序在歷史導航上顯式地設置默認滾動行為。', history.scrollRestoration)
console.log('歷史中元素的數目，包括當前加載的頁。', history.length)
console.log('歷史堆棧頂部的狀態的值。', history.state)
console.log('前往上一頁, 點擊瀏覽器返回按鈕模擬此方法，等價於 history.go(-1)。', history.back)
console.log('根據參數前往歷史記錄中的頁面。', history.go)
console.log('前往下一頁，點擊瀏覽器前進按鈕模擬此方法，等價於 history.go(1)。', history.forward)
console.log('按指定的名稱和URL等數據push進會話歷史棧。', history.pushState)
console.log('按指定的名稱和URL，更新歷史棧上最新的入口。', history.replaceState)
history 對象的方法：
1.history.go()
功能：去往歷史頁面的位置。負值表示向后移動，正值表示向前移動。
語法：history.go(num)
參數：
- num：要去往歷史頁面的位置。
示例：
// 向后移動一頁（等價於調用back()）： history.go(-1) // 向前移動一頁，就像調用了forward()： history.go(1) // 向前移動兩頁： history.go(2); // 向后移動兩頁： history.go(-2); // 重新加載當前頁面： history.go(); history.go(0);
2.history.back()
功能：加載歷史列表中的前一個 URL（如果存在）。等價於點擊后退按鈕或調用 history.go(-1)。
語法：history.back()
示例：
// 向后移動一頁（等價於調用 history.go(-1)）： history.back()
3.history.forward()
功能：加載歷史列表中的后一個 URL（如果存在）。等價於點擊前進按鈕或調用 history.go(1)。
語法：history.forward()
示例：
// 向前移動一頁（等價於調用 history.go(1)）： history.forward()
4.history.pushState()
功能：在歷史列表中添加一條記錄。
語法：history.pushState(stateObj,title,url)
參數：
- stateObj ： 一個與添加的記錄相關聯的狀態對象，主要用於popstate事件。該事件觸發時，該對象會傳入回調函數。也就是說，瀏覽器會將這個對象序列化以后保留在本地，重新載入這個頁面的時候，可以拿到這個對象。如果不需要這個對象，此處可以填null。
- title ：新頁面的標題。但是，現在所有瀏覽器都忽視這個參數，所以這里可以填空字符串。
- url ：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。
示例：
// 添加 console.log(history.length);//讀取歷史長度 history.pushState({a:1,b:2},'標題','https://www.cnblogs.com/elfpower/p/12711330.html'); console.log(history.length);//重新讀取歷史長度
5.history.replaceState()
功能：在歷史列表中修改一條記錄。
語法：history.replaceState(stateObj,title,url)
參數：
- stateObj ： 一個與修改的記錄相關聯的狀態對象，主要用於popstate事件。該事件觸發時，該對象會傳入回調函數。也就是說，瀏覽器會將這個對象序列化以后保留在本地，重新載入這個頁面的時候，可以拿到這個對象。如果不需要這個對象，此處可以填null。
- title ：新頁面的標題。但是，現在所有瀏覽器都忽視這個參數，所以這里可以填空字符串。
- url ：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。
示例：
// 修改 console.log(history.length);//讀取歷史長度 history.replaceState({a:1,b:2},'標題','https://www.cnblogs.com/elfpower/p/12711330.html'); console.log(history.length);//重新讀取歷史長度
location 對象屬性與方法
// Object.getOwnPropertyDescriptors(location) href : {value: "location.html", writable: true, enumerable: true, configurable: false} origin : {set: undefined, enumerable: true, configurable: false, get: ƒ} hash : {enumerable: true, configurable: false, get: ƒ, set: ƒ} host : {enumerable: true, configurable: false, get: ƒ, set: ƒ} hostname : {enumerable: true, configurable: false, get: ƒ, set: ƒ} pathname : {enumerable: true, configurable: false, get: ƒ, set: ƒ} port : {enumerable: true, configurable: false, get: ƒ, set: ƒ} protocol : {enumerable: true, configurable: false, get: ƒ, set: ƒ} search : {enumerable: true, configurable: false, get: ƒ, set: ƒ} assign : {writable: false, enumerable: true, configurable: false, value: ƒ} reload : {writable: false, enumerable: true, configurable: false, value: ƒ} replace : {writable: false, enumerable: true, configurable: false, value: ƒ} toString : {writable: false, enumerable: true, configurable: false, value: ƒ} valueOf : {writable: false, enumerable: false, configurable: false, value: ƒ}
location 對象的屬性：
console.table([ ['href ：', location.href ,'返回完整 URL。'], ['origin ：', location.origin ,'返回 URL 中的協議、域名和端口。'], ['hash ：', location.hash ,'返回 URL 中 # 后的內容。'], ['host ：', location.host ,'返回 URL 中的域名和端口。'], ['hostname：', location.hostname,'返回 URL 中的域名。'], ['pathname：', location.pathname,'返回 URL 中域名和端口后以 / 開頭的路徑部分。'], ['port ：', location.port ,'返回 URL 中的端口。'], ['protocol：', location.protocol,'返回 URL 中的協議。'], ['search ：', location.search ,'返回 URL 中以 ? 開頭的參數部分。'] ])
location 對象的方法：
1.location.assign()
功能：跳轉到指定 URL 。
語法：location.assign(url)
參數：
- url : 要加載的URL。
示例：
// 跳到指定 URL location.assign('https://www.cnblogs.com/elfpower/p/12711330.html')
2.location.reload()
功能：刷新當前頁面。
語法：location.reload(forcedReload)
參數：
- forcedReload：傳入 true 時，強行從服務器獲取資源刷新頁面；不傳值或傳入 false 時，從緩存中獲取資源刷新頁面。
示例：
// 無緩存刷新頁面 location.reload(true);
3.location.replace()
功能：跳轉到指定 URL，但當前頁面不保存在歷史會話中。
語法：location.replace(url)
參數：
- ulr : 要加載的 URL。
示例：
// 跳到指定 URL location.replace('https://www.cnblogs.com/elfpower/p/12711330.html')
Storage 對象屬性和方法
// Object.getOwnPropertyDescriptors(Storage.prototype) length: {set: undefined, enumerable: true, configurable: true, get: ƒ} key: {writable: true, enumerable: true, configurable: true, value: ƒ} clear: {writable: true, enumerable: true, configurable: true, value: ƒ} setItem: {writable: true, enumerable: true, configurable: true, value: ƒ} getItem: {writable: true, enumerable: true, configurable: true, value: ƒ} removeItem: {writable: true, enumerable: true, configurable: true, value: ƒ} constructor: {writable: true, enumerable: false, configurable: true, value: ƒ}
Web 存儲 API 提供了 localStorage（本地存儲） 和 sessionStorage（會話存儲）兩個存儲對象來對網頁的數據進行添加、刪除、修改、查詢操作。
- localStorage： 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。
- sessionStorage： 用於臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。
localStorage.length \ sessionStorage.length
功能： 返回存儲對象中包含多少條數據。
語法：localStorage.length \ sessionStorage.length
示例：
console.log(localStorage.length)
console.log(sessionStorage.length)
localStorage.key(index) \ sessionStorage.key(index)
功能： 返回存儲對象中第 index 個鍵的名稱。
語法：localStorage.key(index) \ sessionStorage.key(index)
參數：
- index：索引值
示例：
console.log(localStorage.key(0))
console.log(sessionStorage.key(0))
localStorage.clear() \ sessionStorage.clear()
功能： 清除存儲對象中所有數據。
語法：localStorage.clear() \ sessionStorage.clear()
示例：
localStorage.clear()
sessionStorage.clear()
localStorage.setItem() \ sessionStorage.setItem()
功能： 添加鍵和值，如果對應的值存在，則更新該鍵對應的值。
語法：localStorage.setItem(keyname, keyvalue) \ sessionStorage.setItem(keyname, keyvalue)
參數：
- keyname：添加的值的名稱。
- keyvalue：添加的值的名稱所對應的值。
示例：
// 保存數據到 localStorage \ sessionStorage // 方法一 localStorage["mykey1"]='mylocalStoragevalue1'; sessionStorage["mykey1"]='mysessionStoragevalue1'; // 方法二 localStorage.mykey2='mylocalStoragevalue2'; sessionStorage.mykey2='mysessionStoragevalue2'; // 方法三 localStorage.setItem('mykey3', 'mylocalStoragevalue3'); sessionStorage.setItem('mykey3', 'mysessionStoragevalue3');
localStorage.getItem() \ sessionStorage.getItem()
功能：返回指定鍵的值。
語法：localStorage.getItem(keyname) \ sessionStorage.getItem(keyname)
參數：
- keyname：指定的鍵的名稱。
示例：
// 從 localStorage \ sessionStorage 獲取數據 var localData = localStorage.getItem('mykey1'); var sessionData = sessionStorage.getItem('mykey1'); console.log(localData) console.log(sessionData)
localStorage.removeItem() \ sessionStorage.removeItem()
功能： 移除鍵及其所對應的值。
語法：localStorage.removeItem(keyname) \ sessionStorage.removeItem(keyname)
參數：
- keyname：指定的鍵的名稱。
示例：
// 從 localStorage \ sessionStorage 刪除保存的數據 localStorage.removeItem('mykey2'); sessionStorage.removeItem('mykey2');
window 對象屬性和方法
window 對象的屬性與描述：
| 屬性 | 描述 |
|---|---|
| closed | 返回窗口是否已被關閉。 |
| defaultStatus | 設置或返回窗口狀態欄中的默認文本。 |
| document | 對 Document 對象的只讀引用。 |
| frames | 返回窗口中所有命名的框架。該集合是 Window 對象的數組，每個 Window 對象在窗口中含有一個框架。 |
| history | 對 History 對象的只讀引用。 |
| innerHeight | 返回窗口的文檔顯示區的高度。 |
| innerWidth | 返回窗口的文檔顯示區的寬度。 |
| localStorage | 在瀏覽器中存儲 key/value 對。沒有過期時間。 |
| length | 設置或返回窗口中的框架數量。 |
| location | 用於窗口或框架的 Location 對象。 |
| name | 設置或返回窗口的名稱。 |
| navigator | 對 Navigator 對象的只讀引用。 |
| opener | 返回對創建此窗口的窗口的引用。 |
| outerHeight | 返回窗口的外部高度，包含工具條與滾動條。 |
| outerWidth | 返回窗口的外部寬度，包含工具條與滾動條。 |
| pageXOffset | 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。 |
| pageYOffset | 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| screen | 對 Screen 對象的只讀引用。。 |
| screenLeft | 返回相對於屏幕窗口的x坐標 |
| screenTop | 返回相對於屏幕窗口的y坐標 |
| screenX | 返回相對於屏幕窗口的x坐標 |
| sessionStorage | 在瀏覽器中存儲 key/value 對。 在關閉窗口或標簽頁之后將會刪除這些數據。 |
| screenY | 返回相對於屏幕窗口的y坐標 |
| self | 返回對當前窗口的引用。等價於 Window 屬性。 |
| status | 設置窗口狀態欄的文本。 |
| top | 返回最頂層的父窗口。 |
window 對象的屬性與示例：
// window 對象屬性： console.table([ ['window.closed ',window.closed ,'返回窗口是否已被關閉。'], ['window.defaultStatus ',window.defaultStatus ,'設置或返回窗口狀態欄中的默認文本。'], ['window.innerHeight ',window.innerHeight ,'返回窗口的文檔顯示區的高度。'], ['window.innerWidth ',window.innerWidth ,'返回窗口的文檔顯示區的寬度。'], ['window.length ',window.length ,'設置或返回窗口中的框架數量。'], ['window.name ',window.name ,'設置或返回窗口的名稱。'], ['window.opener ',window.opener ,'返回對創建此窗口的窗口的引用。'], ['window.outerHeight ',window.outerHeight ,'返回窗口的外部高度，包含工具條與滾動條。'], ['window.outerWidth ',window.outerWidth ,'返回窗口的外部寬度，包含工具條與滾動條。'], ['window.pageXOffset ',window.pageXOffset ,'設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。'], ['window.pageYOffset ',window.pageYOffset ,'設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。'], ['window.screenLeft ',window.screenLeft ,'返回相對於屏幕窗口的x坐標'], ['window.screenTop ',window.screenTop ,'返回相對於屏幕窗口的y坐標'], ['window.screenX ',window.screenX ,'返回相對於屏幕窗口的x坐標'], ['window.screenY ',window.screenY ,'返回相對於屏幕窗口的y坐標'], ['window.status ',window.status ,'設置窗口狀態欄的文本。'], ['window.document ',window.document ,'對 Document 對象的只讀引用。'], ['window.frames ',window.frames ,'返回窗口中所有命名的框架。該集合是 Window 對象的數組，每個 Window 對象在窗口中含有一個框架。'], ['window.history ',window.history ,'對 History 對象的只讀引用。'], ['window.localStorage ',window.localStorage ,'在瀏覽器中存儲 key/value 對。沒有過期時間。'], ['window.location ',window.location ,'用於窗口或框架的 Location 對象。'], ['window.navigator ',window.navigator ,'對 Navigator 對象的只讀引用。'], ['window.parent ',window.parent ,'返回父窗口。'], ['window.screen ',window.screen ,'對 Screen 對象的只讀引用。。'], ['window.sessionStorage ',window.sessionStorage ,'在瀏覽器中存儲 key/value 對。 在關閉窗口或標簽頁之后將會刪除這些數據。'], ['window.self ',window.self ,'返回對當前窗口的引用。等價於 Window 屬性。'], ['window.top ',window.top ,'返回最頂層的父窗口。'] ])
window 對象的方法與描述：
| 方法 | 描述 |
|---|---|
| alert() | 顯示帶有一段消息和一個確認按鈕的警告框。 |
| atob() | 解碼一個 base-64 編碼的字符串。 |
| btoa() | 創建一個 base-64 編碼的字符串。 |
| blur() | 把鍵盤焦點從頂層窗口移開。 |
| clearInterval() | 取消由 setInterval() 設置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法設置的 timeout。 |
| close() | 關閉瀏覽器窗口。 |
| confirm() | 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 |
| focus() | 把鍵盤焦點給予一個窗口。 |
| getSelection() | 返回一個 Selection 對象，表示用戶選擇的文本范圍或光標的當前位置。 |
| getComputedStyle() | 獲取指定元素的 CSS 樣式。 |
| matchMedia() | 該方法用來檢查 media query 語句，它返回一個 MediaQueryList對象。 |
| moveBy() | 可相對窗口的當前坐標把它移動指定的像素。 |
| moveTo() | 把窗口的左上角移動到一個指定的坐標。 |
| open() | 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 |
| print() | 打印當前窗口的內容。 |
| prompt() | 顯示可提示用戶輸入的對話框。 |
| resizeBy() | 按照指定的像素調整窗口的大小。 |
| resizeTo() | 把窗口的大小調整到指定的寬度和高度。 |
| scrollBy() | 按照指定的像素值來滾動內容。 |
| scrollTo() | 把內容滾動到指定的坐標。 |
| setInterval() | 按照指定的周期（以毫秒計）來調用函數或計算表達式。 |
| setTimeout() | 在指定的毫秒數后調用函數或計算表達式。 |
| stop() | 停止頁面載入。 |
window.alert()
功能：顯示帶有一段消息和一個確認按鈕的警告框。
語法：window.alert(msg)
參數：
- msg：要顯示在對話框的信息文本。
示例：
alert('elfpower')
window.atob()
功能：解碼一個 base-64 編碼的字符串。
語法：window.atob(encodedData)
參數：
- encodedData：一個通過 btoa() 方法編碼的字符串。
示例：
var str = "elfpower"; var enc = window.btoa(str); var dec = window.atob(enc); var res = "編碼字符串為: " + enc + " , " + "解碼后字符串為: " + dec;
window.btoa()
功能：創建一個 base-64 編碼的字符串。
語法：window.btoa(str)
參數：
- str：要編碼的字符串。
示例：
var str = "elfpower"; var enc = window.btoa(str);var res = "編碼字符串為: " + enc;
window.blur()
功能：把鍵盤焦點從頂層窗口移開。
語法：window.blur()
參數：
示例：
<!-- 假設有以下元素 --> <button onclick="newWindow()"> 點擊打開新窗口 </button>
// 打開新窗口 function newWindow(){ oNewWindow = window.open('','','width=300,height=180'); oNewWindow.document.write("<p>這是新窗口。</p>"); oNewWindow.blur(); }
window.clearInterval()
功能：取消由 setInterval() 設置的 timeout。
語法：window.clearInterval(setinterval_Id)
參數：
- setinterval_Id：setInterval 的 id，存儲 setInterval 的變量。
示例：
var timer = setInterval(() => getDate(), 1000); var limit = 10; function getDate() { var d = new Date(); console.log(d) if (limit == 0) { clearTimer() }else { limit-- } } function clearTimer() { clearInterval(timer); console.log('停止 timer') }
window.clearTimeout()
功能：取消由 setTimeout() 方法設置的 timeout。
語法：window.clearTimeout(setTimeout_Id)
參數：
- setTimeout_Id：setTimeout 的 id，存儲 setTimeout 的變量。
示例：
var timer = setTimeout(() => getDate(), 3000); function getDate() { var d = new Date(); console.log('3000 毫秒后獲取時間',d) clearTimer() } function clearTimer() { clearTimeout(timer); console.log('停止 timer 計時') }
window.close()
功能：關閉瀏覽器窗口。
語法：windowObj.close()
示例：
<!-- 假設頁面中有以下元素 --> <button onclick="openNewWindow()" >打開新窗口</button> <br> <button onclick="closeNewWindow()">關閉新窗口</button>
function openNewWindow(){ oNewWindow = window.open("https://www.cnblogs.com/elfpower/p/12711330.html","","top=300,left=300,width=300,height=180"); } function closeNewWindow(){ oNewWindow.close(); }
window.confirm()
功能：顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
語法：window.confirm(msg)
參數：
- msg：要顯示在對話框中的信息。
示例：
var isOk = confirm('是否確定') console.log('isOk? ',isOk)
window.focus()
功能：把鍵盤焦點給予一個窗口。
語法：windowObj.focus()
示例：
openNewWindow() function openNewWindow(){ oNewWindow = window.open("https://www.cnblogs.com/elfpower/p/12711330.html","","top=300,left=300,width=300,height=180"); oNewWindow.focus() function oNewWindowOnfocus () { alert(' oNewWindow 聚焦') } oNewWindow.addEventListener('focus',oNewWindowOnfocus,false) }
window.getSelection()
功能：返回一個 Selection 對象，表示用戶選擇的文本范圍或光標的當前位置。
語法：window.getSelection()
示例：
<!-- 假設頁面中有以下元素 --> <div id="demo"> 鼠標框選一下內容 圓周率前千位： 3.14159 26535 89793 23846 26433 83279 50288 41971 69399 37510 58209 74944 59230 78164 06286 20899 86280 34825 34211 70679 82148 08651 32823 06647 09384 46095 50582 23172 53594 08128 48111 74502 84102 70193 85211 05559 64462 29489 54930 38196 44288 10975 66593 34461 28475 64823 37867 83165 27120 19091 45648 56692 34603 48610 45432 66482 13393 60726 02491 41273 72458 70066 06315 58817 48815 20920 96282 92540 91715 36436 78925 90360 01133 05305 48820 46652 13841 46951 94151 16094 33057 27036 57595 91953 09218 61173 81932 61179 31051 18548 07446 23799 62749 56735 18857 52724 89122 79381 83011 94912 98336 73362 44065 66430 86021 39494 63952 24737 19070 21798 60943 70277 05392 17176 29317 67523 84674 81846 76694 05132 00056 81271 45263 56082 77857 71342 75778 96091 73637 17872 14684 40901 22495 34301 46549 58537 10507 92279 68925 89235 42019 95611 21290 21960 86403 44181 59813 62977 47713 09960 51870 72113 49999 99837 29780 49951 05973 17328 16096 31859 50244 59455 34690 83026 42522 30825 33446 85035 26193 11881 71010 00313 78387 52886 58753 32083 81420 61717 76691 47303 59825 34904 28755 46873 11595 62863 88235 37875 93751 95778 18577 80532 17122 68066 13001 92787 66111 95909 21642 01989 </div>
// javascript 部分 var demo = document.getElementById('demo') function getText(e) { var str = window.getSelection ? window.getSelection() : document.selection.createRange().text; // 兼容 if (str == "") { // 為空 return false } else { var focusStr = str.focusNode.data var begin = str.baseOffset var end = str.extentOffset var txt = focusStr.slice(begin, end) console.log("txt : ",txt) alert(txt); } } demo.addEventListener('mouseup',getText,false)
window.getComputedStyle()
功能：獲取指定元素的 CSS 樣式。
語法：window.getComputedStyle(element [,pseudoElt ])
參數：
- element：要獲取其計算風格的Element。
- pseudoElt（可選的）：指定要匹配的偽元素的字符串。必須省略（或null）常規元素。
示例：
/* style 部分 */ #demo { position: relative; margin: 0 auto; padding: 10px; width: 180px; height: 200px; background: red; text-align: center; } #demo::after { content: '偽元素'; position: absolute; top: 100px; left: 50px; width: 100px; height: 100px; border-radius: 50%; background: skyblue; line-height: 100px; }
<!-- 假設頁面中有以下元素 --> <div id="demo"></div>
// javascript 部分 function getStyle(){ var demo = document.getElementById("demo"); var demoComputedStyle = window.getComputedStyle(demo,null) var afterComputedStyle = window.getComputedStyle(demo,'::after') var demoCssStr = demoComputedStyle['background-color'] var afterCssStr = afterComputedStyle['background-color'] demo.innerHTML = 'demo 背景色: ' + demoCssStr + '<br>' + '偽元素 背景色：' +afterCssStr ; } getStyle()
window.matchMedia()
功能：該方法用來檢查 media query 語句，它返回一個 MediaQueryList對象。
語法：window.matchMedia(mediaQueryString)
參數：
- mediaQueryString：要返回新MediaQueryList對象的媒體查詢的字符串。
示例：
window.onresize = function () { if (window.matchMedia("(min-width: 400px)").matches) { console.log('窗口大於 400px') } else { console.log('窗口小於 400px') } }
window.moveBy()
功能：可相對窗口的當前坐標把它移動指定的像素。
語法：windowObj.moveBy(x,y)
參數：
- x：是水平移動窗口的像素數量。
- y：是垂直移動窗口的像素數量。
示例：
var newWin = window.open("","","height=200px,width=200px") moveWindow() function moveWindow() { var timer = null; var num = 10; timer = setInterval(() => { if (num == 0) { clearInterval(timer) } else { newWin.moveBy(50,60) num-- } }, 1000); }
window.moveTo()
功能：把窗口的左上角移動到一個指定的坐標。
語法：windowObj.moveTo(x,y)
參數：
- x：要移動到的水平坐標。
- y：要移動到的垂直坐標。
示例：
var newWin = window.open("","","height=200px,width=200px") moveWindow() function moveWindow() { var timer = null; var num = 10; timer = setInterval(() => { if (num == 0) { clearInterval(timer) } else { newWin.moveTo(50,60) num-- } }, 1000); }
window.open()
功能：打開一個新的瀏覽器窗口或查找一個已命名的窗口。
語法：window.open(URL,name,specs,replace)
參數：
- URL 可選。打開指定的頁面的URL。如果沒有指定URL，打開一個新的空白窗口
- name 可選。指定target屬性或窗口的名稱。支持以下值：
- _blank ： URL加載到一個新的窗口。這是默認
- _parent ： URL加載到父框架
- _self ： URL替換當前頁面
- _top ： URL替換任何可加載的框架集
- name ： 窗口名稱
- specs 可選。一個逗號分隔的項目列表。支持以下值：
- channelmode=yes|no|1|0 ：是否要在影院模式顯示 window。默認是沒有的。僅限IE瀏覽器
- directories=yes|no|1|0 ：是否添加目錄按鈕。默認是肯定的。僅限IE瀏覽器
- fullscreen=yes|no|1|0 ：瀏覽器是否顯示全屏模式。默認是沒有的。在全屏模式下的window，還必須在影院模式。僅限IE瀏覽器
- height=pixels ：窗口的高度。最小.值為100
- left=pixels ：該窗口的左側位置
- location=yes|no|1|0 ：是否顯示地址字段.默認值是yes
- menubar=yes|no|1|0 ：是否顯示菜單欄.默認值是yes
- resizable=yes|no|1|0 ：是否可調整窗口大小.默認值是yes
- scrollbars=yes|no|1|0 ：是否顯示滾動條.默認值是yes
- status=yes|no|1|0 ：是否要添加一個狀態欄.默認值是yes
- titlebar=yes|no|1|0 ：是否顯示標題欄.被忽略，除非調用HTML應用程序或一個值得信賴的對話框.默認值是yes
- toolbar=yes|no|1|0 ：是否顯示瀏覽器工具欄.默認值是yes
- top=pixels ：窗口頂部的位置.僅限IE瀏覽器
- width=pixels ：窗口的寬度.最小.值為100
- replace Optional.Specifies規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目，還是替換瀏覽歷史中的當前條目。支持下面的值：
- true ： URL 替換瀏覽歷史中的當前條目。
- false ：URL 在瀏覽歷史中創建新的條目。
示例：
var url = "https://www.cnblogs.com/elfpower/p/12711330.html"; var name = "newWinow"; var specs = "top=300,left=300,width=300,height=180"; var replace = false; window.open(url,name,specs,false);
window.print()
功能：打印當前窗口的內容。
語法：window.print()
示例：
function printpage(){ alert('即將進入打印設置') window.print(); } printpage()
window.prompt()
功能：顯示可提示用戶輸入的對話框。
語法：window.prompt(msg,defaultText)
參數：
- msg 可選：要在對話框中顯示的純文本（而不是 HTML 格式的文本）。
- defaultText 可選：默認的輸入文本。
示例：
function sayHi() { var name = prompt("請輸入你的名字", "光哥"); if (name != null && name != "") { var str = "你好, " + name + "~ " alert(str) console.log(str); } } sayHi()
window.resizeBy()
功能：按照指定的像素調整窗口的大小。
語法：window.resizeBy(width,height)
參數：
- width 必需：要使窗口寬度增加的像素數。可以是正、負數值。
- height 可選：要使窗口高度增加的像素數。可以是正、負數值。
示例：
var newWindow = window.open("","","width=200,height=600") function resizeWindow(){ var timer = null; timer = setTimeout(() => { newWindow.resizeBy(800,-200) clearTimeout(timer) }, 2000); } resizeWindow()
window.resizeTo()
功能：把窗口的大小調整到指定的寬度和高度。
語法：window.resizeTo(width,height)
參數：
- width 必需。設置窗口的寬度，以像素為單位。
- height 必需。設置窗口的高度，以像素為單位。
示例：
var newWindow = window.open("","","width=200,height=300") function resizeWindow(){ var timer = null; timer = setTimeout(() => { newWindow.resizeTo(800,600) clearTimeout(timer) }, 2000); } resizeWindow()
window.scrollBy()
功能：按照指定的像素值來滾動內容。
語法：window.scrollBy(x,y)
參數：
- x 必需：把文檔向右滾動的像素數。
- y 必需：把文檔向下滾動的像素數。
示例：
function scrollWindow(){ window.scrollBy(100,600); } scrollWindow()
window.scrollTo()
功能：把內容滾動到指定的坐標。
語法：window.scrollTo(x,y)
參數：
- x 必需：要在窗口文檔顯示區左上角顯示的文檔的 x 坐標。
- y 必需：要在窗口文檔顯示區左上角顯示的文檔的 y 坐標。
示例：
function scrollWindow(){ window.scrollTo(100,200); } scrollWindow()
window.setInterval()
功能：按照指定的周期（以毫秒計）來調用函數或計算表達式。
語法：
- window.setInterval(code, milliseconds);
- window.setInterval(function, milliseconds, param1, param2, ...)
參數：
- code/function 必需：要調用一個代碼串，也可以是一個函數。
- milliseconds 必須：周期性執行或調用 code/function 之間的時間間隔，以毫秒計。
- param1, param2, ... 可選： 傳給執行函數的其他參數（IE9 及其更早版本不支持該參數）。
示例：
var timer = setInterval(() => getDate(), 1000); var limit = 10; function getDate() { var d = new Date(); console.log(d) if (limit == 0) { clearTimer() }else { limit-- } } function clearTimer() { clearInterval(timer); console.log('停止 timer') }
window.setTimeout()
功能：在指定的毫秒數后調用函數或計算表達式。
語法：
- window.setTimeout(code, milliseconds, param1, param2, ...)
- window.setTimeout(function, milliseconds, param1, param2, ...)
參數：
- code/function 必需：要調用一個代碼串，也可以是一個函數。
- milliseconds 可選：執行或調用 code/function 需要等待的時間，以毫秒計。默認為 0。
- param1, param2, ... 可選： 傳給執行函數的其他參數（IE9 及其更早版本不支持該參數）。
示例：
var timer = setTimeout(() => getDate(), 3000); function getDate() { var d = new Date(); console.log('3000 毫秒后獲取時間',d) clearTimer() } function clearTimer() { clearTimeout(timer); console.log('停止 timer 計時') }
window.stop()
功能：停止頁面載入。
語法：window.stop()
示例：
window.stop();
JavaScript 中的三大對象 (本地對象、內置對象、 宿主對象)
本地對象
- Object 對象屬性和方法
- String 對象屬性和方法
- Array 對象屬性和方法
- Date 對象屬性和方法
- Number 對象屬性和方法
- RegExp 對象屬性和方法
- Function 對象屬性和方法
- Boolean 對象屬性和方法
- Error 對象屬性和方法
內置對象
宿主對象