BOM

BOM概念

BOM(browser Object model)，譯為瀏覽器物件模型。JavaScript會把瀏覽器的一個標籤頁(即網頁)作為一個物件存於程式中，提供了一系列API來操作標籤頁，比如新建或關閉標籤頁、跳轉頁面、前進或後退等功能。

類似於DOM核心是document物件，BOM也是有一個核心物件window。BOM相關的API是由window物件提供。

window物件概念

widow物件是每一個頁面都會有的物件，由JavaScript程式自動生成，每個頁面的window物件是不一樣的。window物件提供了用於操作本頁面所需的所有API。值得一提的是，document物件實際上是作為window物件的一部分的。

window物件API

• alert

• prompt

• confirm：頁面上彈出一個確認框，點選確定返回true，否則返回false。

• open：新建一個頁面。不推薦使用，受瀏覽器的安全機制影響，可能無法執行。

• close：關閉當前頁面。

• setInterval

• setTimeout

• clearInterval

• clearTimeout

• innerWidth&innerHeight：用於獲取頁面視窗的寬度和首屏高度。

• outerWidth&outerHeight：用於獲取頁面視窗的寬度和整個標籤頁視窗的高度(即innerHeight+瀏覽器的工具欄高度)。

  //close
  var result = confirm('確定是否關閉頁面');
  window.close();//關閉當前頁面
  
  //open 
  window.open("網頁地址", 開啟方式, "視窗的基本配置字串");
  //例子：新頁面開啟百度首頁，寬高300，距離瀏覽器頂部和左邊100px
  window.open("http://www.baidu.com", '_blank', "width=300, height=300, top=100, left=100");
  
  // innerWidth innerHeith 
  console.log(innerWidth ,innerHeight);
  

BOM四大內建物件

location

屬於window物件，location本身也是一個物件，內建了一些API能夠實現重新整理、跳轉頁面等功能，同時能夠獲取頁面地址。

常用API：

• location.host：獲取頁面地址中的主機地址

• location.port：獲取頁面地址中的埠號

• location.protocol：獲取頁面地址中的協議名稱

• location.hostname：獲取頁面地址中的ip地址

• location.search：獲取頁面地址中的 資料

• location.href：獲取頁面的完整地址

• location.assign()：跳轉到指定的頁面，新建一條歷史記錄

• location.replace()：跳轉到指定的頁面，替換當前歷史記錄，無法後退到上一步

• location.reload()：重新整理當前頁面

  //例子：http://127.0.0.1:5500/week4/day02/05-location.html?name=zs&age=12&sex=man
  console.log(location.host);//127.0.0.1:5500
  console.log(location.port);//5500
  console.log(location.protocol);//http:
  console.log(location.hostname);//127.0.0.1
  console.log(location.search);//?name=zs&age=12&sex=man
  console.log(location.href);//整個地址
  
  //跳轉
  location.assign("要跳轉的頁面地址")
  location.replace("要跳轉的頁面地址")
  location.href = "要跳轉的頁面地址";
  
  //重新整理
  location.reload();
  

  • 基本上只能夠使用，除了href外不能修改。

history

提供了頁面前進或後退的api，能夠實現頁面的前進或後退。

• go(數字)：根據數字的正負來確定是前進還是後退指定的頁數。go(-1)表示後退一頁，go(1)表示前進一步。

• forward()：前進一頁。

• back()：後退一頁。

  window.history.go(-1);
  等同於 history.go(-1);
  history.forward();
  history.back();
  

navigator

收集與瀏覽器本身相關的資訊，比如瀏覽器版本，當前作業系統的版本等。配合正則表示式，能夠判斷當前使用者使用的瀏覽器版本以及是否為移動端，方便切換PC端頁面或移動端頁面。

• userAgent：返回瀏覽器的版本資訊

  navigator.userAgent
  

screen

收集螢幕的相關資訊，比如是否橫屏、色彩之類的。HTML5針對screen新增了orientation來獲取螢幕的角度資訊，豎屏模式角度返回0，橫屏返回90。

console.log(screen);
//顯示當前螢幕旋轉的角度
console.log(screen.orientation.angle);// 豎屏：0 橫屏：90

定時器

JavaScript提供了兩個API來實現在一段時間之後執行指定的JavaScript程式碼的功能，根據指定js程式碼是否重複執行分為兩種定時器：延時定時器以及間隔定時器。

延時定時器

• setTimeout：指定一段時間之後執行一次指定的 JavaScript程式碼。

  setTimeout(function(){
      延時執行的js程式碼
  },延時時間);
  

  延時時間以毫秒為單位

• clearTimeout：終止定時器的執行

  clearTimeout(延時定時器的識別符號);
  

  定時器的識別符號指的是定時器的id，表示要暫停哪個定時器，定時器的識別符號可以通過setTimeout的返回值來得到。clearTimeout是定時器執行之前使用，如果定時器執行後clearTimeout是無效的。

間隔定時器

• setInterval：能夠實現每隔一段時間都會執行一次指定的程式碼。

  setInterval(function(){
      每隔一段時間要執行的js程式碼
  },間隔時間);
  

  間隔時間以毫秒為單位

• clearInterval：用於停止間隔定時器

  clearInterval(間隔定時器的識別符號);
  

• 如果不清除定時器就新增同樣的定時器，則這些定時器就會疊加，反應為執行程式碼頻次增加(像分時複用一樣)，所以在新增定時器時記得清除舊定時器。