1. 程式人生 > >JavaScript高階程式設計學習8_BOM

JavaScript高階程式設計學習8_BOM

1、視窗位置

IE、Safari、Opera和Chrome都提供了screenLeft和screenTop屬性,Firefox則提供了screenX和screenY屬性,Safari和Chrome同時也支援這兩個屬性,使用下列程式碼可ku跨瀏覽器取瀏覽器視窗的位置:

let leftPos = (typeof window.screenLeft == 'number')? window.screenLeft:window.screenX;
let topPos = (typeof window.screenTop == 'number')? window.screenTop:window.screenTop;

2、視窗大小

跨瀏覽器確定視窗的大小不是一件簡單的事。IE、Safari、Firefox、Opera和Chrome均提供了4個屬性:innerWidth、innerHeight、outerHeight和outerWidth。在IE9+、Safari和Firefox中,outerHeight和outerWidth返回瀏覽器本身的尺寸。在Opera中,這兩個屬性表示頁面檢視容器(指Opera中單個標籤頁對應的瀏覽器視窗)的大小。而innerWidth、innerHeight則表示該容器中頁面檢視區的大小(減去邊框寬度)。在Chrome中,innerWidth、innerHeight、outerHeight和outerWidth返回相同的值,即視口大小而非瀏覽器視窗大小。

通過DOM,在IE、Safari、Firefox、Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight中就儲存了視口的資訊(標準模式);如果是混雜模式就必須通過document.body.clientWidth和document.body.clientHeight來獲取,雖最終無法確定瀏覽器的大小名單可以取到視口大小,如下:

let pageWidth = window.innerWidth,
pageHeight = window.innerHeight;

if(typeof pageWidth != "number"){
  if(document.compatMode == "CSS1Compat")//檢查是否處於標準模式
  {
    pageWidth = window.documentElement.clientWidth,
    pageHeight = window.documentElement.clientHeight;
  }
  else{
    pageWidth = window.body.clientWidth,
    pageHeight = window.body.clientHeight;
  }
}

3、超時呼叫和間歇呼叫

setTimeout()和setInterval(),常用、不做贅述

4、location物件

location是最有用的BOM物件之一。它提供了與當前視窗中載入的文件有關的資訊、還提供了一些導航功能。注意:window.location和document.location引用的是同一個物件,下面是location的所有屬性: 

屬性名 例子 說明
hash "#contents" 返回URL中的hash(#號後跟0或多個字元),如果URL不包含雜湊,則返回空字串
host "www.wrox.com:80" 返回伺服器名稱和埠號(if exist)
hostname "www.wrox.com" 返回伺服器名稱
href "http://www.wrox.com" 返回當前載入頁面的完整URL。而location物件的toString()也是返回這個值
pathname "/WileyCDA" 返回URL中的目錄和(或)檔名
port "8080" 返回URL中指定的埠號(if exist),否則返回空字元
protocol "http:" 返回頁面使用的協議。通常是http:或https:
search "?q=javascript" 返回URL的查詢字串。以問號開頭