BOM相關物件的屬性與方法

阿新 • • 發佈：2020-07-08

BOM

BOM - Browser Object Model ( 瀏覽器物件模型 )，BOM 主要用於操作與管理瀏覽器相關狀態。BOM 由以 window 物件為主以及其他常用物件如 navigator 、location 、history 、screen 、document 等等功能各異的物件組成。BOM 相關物件提供了很多方法與屬性以便於操作瀏覽器，但由於各瀏覽器標準不同，導致各瀏覽器 BOM 相關物件 api 不盡相同，以下主要以 google 瀏覽器為例，記錄與分析 BOM 相關常見物件的屬性與方法：

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')

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();

本地物件

內建物件

Global 物件屬性和方法（todo）
Math 物件屬性和方法
JSON 物件屬性和方法

BOM相關物件的屬性與方法

BOM

navigator 物件屬性與方法

navigator各屬性與描述：

navigator 物件方法：

screen 物件屬性與方法

history 物件屬性與方法

history 物件的方法：

location 物件屬性與方法

location 物件的屬性：

location 物件的方法：

window 物件屬性和方法

window 物件的屬性與描述：

window 物件的屬性與示例：

window 物件的方法與描述：

本地物件

內建物件

宿主物件

13面向物件---屬性與方法

JavaScript陣列型別Array相關的屬性與方法詳解

BOM相關物件的屬性與方法

面向物件03-屬性與方法

python圖形開發GUI庫pyqt5的詳細使用方法及各控制元件的屬性與方法

JavaScript中的全域性屬性與方法深入解析

Python 簡明教程 --- 20，Python 類中的屬性與方法

Global 物件屬性和方法

有關vue中的計算屬性與方法、計算屬性與監聽屬性的區別

path屬性與方法的學習和整理

Flutter scaffold元件的屬性與方法

JavaScript 語法：陣列的定義及其常用屬性與方法

通過例項解析javascript Date物件屬性及方法

Vue 計算屬性與方法

對陣列物件遞迴遍歷給子物件新增父物件屬性的方法

Python 中遞迴實現設定物件下屬所有子物件屬性的方法

ASP.NET CORE 重寫IControllerActivator實現預設IOC屬性與方法注入

人生苦短我學Java-6-面向物件之類與方法定義/例項化/過載/可變個數形參

計算屬性與方法的區別

常見的JS字串屬性與方法集錦

BOM相關 物件的屬性與方法

BOM

navigator 物件屬性與方法

navigator各屬性與描述：

navigator 物件方法：

screen 物件屬性與方法

history 物件屬性與方法

history 物件的方法：

location 物件屬性與方法

location 物件的屬性：

location 物件的方法：

window 物件屬性和方法

window 物件的屬性與描述：

window 物件的屬性與示例：

window 物件的方法與描述：

本地物件

內建物件

宿主物件

相關推薦

BOM相關物件的屬性與方法