JS BOM瞭解

概述

BOM(Browser Object Model)瀏覽器對象模型，就是操作瀏覽器的一些能力，可以操作的內容如下：

• 獲取一些瀏覽器相關信息（視窗大小）
• 操作瀏覽器的滾動條
• 瀏覽器的信息（瀏覽器的版本）
• 讓瀏覽器出現一個彈窗（alert，confirm，prompt）

BOM的核心就是window對象，window是瀏覽器的一個對象，裡面包含著操作瀏覽器的方法。

1 History瀏覽器記錄

window 中有一個對象叫做history，是專門用來存儲歷史記錄信息的，在編寫時可不使用 window 這個首碼。

1.1 history.go

• history.go(n): n為正數時向前n頁，n為負數時向後退n頁

  window.history.go(-2); 	// 返回上上頁
  window.history.go(-1); 	// 返回上一頁
  window.history.go(0); 	// 刷新當前頁
  window.history.go(1); 	// 前往下一頁
  

1.2 history.back()

• history.back是用來回退歷史記錄的，就是回到前一個頁面，相當於瀏覽器上的返回按鈕，前提是要有上一條記錄，不然就是一直在當前頁面，也不會回退。

  window.history.back();
  

1.3 history.forword()

• history.forword是到一個歷史記錄裡面，也就是下一個頁面，前提是之前有過回退操作，不然當前就是最後一個頁面，沒有下一個。

  window.history.forward();
  

2 Location瀏覽器地址

2.1 操作屬性

註意：pathname、search屬性在HashRouter路由模式下會失效，只能在BrowserRouter路由模式下使用。
假定當前瀏覽器載入的URL是：http://test.csdn.com:3000/#/build_table?id=1
常用屬性如下表所示：

以下是幾個特殊屬性：

• location.hash：URL散列值（#號之後的部分，包括#號）；

• location.search：URL的查詢字元串（?號後面的部分，包括?，指的是埠後面緊接著的?號，而不是#號後面的?號）

  - url為：http://test.csdn.com:3000/#/build_table?id=1
  console.log(location.hash)		// "#/build_table?id=1"
  console.log(location.search )	// ""
  
  - url為：http://test.csdn.com:3000/?id=1#/build_table
  console.log(location.hash)		// "#/build_table"
  console.log(location.search)	// "?id=1#/build_table"
  

• 設置屬性，URL為：http://test.csdn.com:3000/#/build_table?id=1

  location.hash = '#/cerate_table?id=2'
  console.log(location.href)	// http://test.csdn.com:3000/#/cerate_table?id=2
  
  location.search= '?/id=2'
  console.log(location.href)	// http://test.csdn.com:3000/#/?id=2
  

• 其他屬性示例：http://foouser:[email protected]:80/HB/new_file2.html

  屬性	值	說明
  location.username	foouser	功能變數名稱前指定的用戶名
  location.password	barpassword	功能變數名稱前指定的密碼

2.2 操作方法

• 跳轉：location.assign()

  // 指定協議跳轉
  location.assign("http://www.baidu.com")
  /* 等同於 */ 
  location.href = "http://www.baidu.com"
  
  // 以當前頁面協議跳轉
  location.assign("//www.baidu.com")
  /* 等同於 */ 
  location.href = "//www.baidu.com"
  

• 刷新：location.reload()

  // 重新載入，可能是從緩存載入
  location.reload();
  // 重新載入，從伺服器載入
  location.reload(true)
  

3 window界面屬性

• 視窗：指的是瀏覽器視窗
• 視口：指的是瀏覽器視窗中的頁面視口（不包含瀏覽器邊框和工具欄）
• 屏幕：指的是電腦屏幕

3.1 視窗和屏幕的位置

• screenLeft：表示視窗相對於屏幕左側的位置，返回值的單位是像素值
• screenTop：表示視窗相對於屏幕頂部的位置，返回值的單位是像素值

  console.log("screenLeft 位置：", window.screenLeft);
  console.log("screenTop 位置：", window.screenTop);
  

• moveTo：接收要移動到的新位置的絕對坐標x和y；
• moveBy：接收相對當前位置在兩個方向上移動的像素值

  // 把視窗移動到左上角
  window.moveTo(0,0)
  
  // 把視窗移動到坐標位置（200，300）
  window.moveTo(200,300)
  
  // 把視窗向下移動100像素
  window.moveBy(0,100)
  
  // 把視窗向左移動10像素
  window.moveBy(-10,0)
  

3.2 視窗和視口的大小

• 視口：innerHeight和innerWidth，返回瀏覽器視窗中頁面視口大小（不包含瀏覽器邊框和工具欄）

  console.log("innerWidth 寬度：",window.innerWidth);
  // innerWidth 寬度： 1002
  console.log("innerHeight 高度：",window.innerHeight);
  // innerHeight 高度： 907
  

• 視窗：outerHeight和outerWidth，返回瀏覽器自身視窗的大小

  console.log("outerWidth 寬度：",window.outerWidth);
  // outerWidth 寬度： 1680
  console.log("outerHeight 高度：",window.outerHeight);
  // outerHeight 高度： 1010
  

• 瀏覽器的onscroll事件
  瀏覽器滾動其實其本身沒有動，只不過是頁面向上平移了，所以滾動應該使用document對象，onscroll事件是當瀏覽器滾動條滾動時觸發或者滑鼠滾輪滾動時觸發，前提是頁面的高度超過瀏覽器的可視視窗。

  window.onscroll = function(){
  	console.log('瀏覽器滾動了');
  }
  

3.3 視口與滾動的關係

Safari瀏覽器使用的是window.pageXOffset和window.pageYOffset

• 距離，scrollX：文檔向右滾動的距離，當視窗無法展示整個頁面，這時候需要滾動查看；
• 距離，scrollY：文檔向下滾動的距離，當視窗無法展示整個頁面，這時候需要滾動查看；

  console.log("scrollX 向右滾動了多少距離：",window.scrollX);
  // scrollX 向右滾動了多少距離： 0
  console.log("scrollY 向下滾動了多少距離：",window.scrollY);
  // scrollY 向下滾動了多少距離： 0
  

• 定位，scrollTo（絕對）和scrollBy（相對），這兩個方法接收x和y坐標，表示要滾動到的位置

  // 滾動到頁面左上角
  window.scrollTo(0,0)
  
  // 滾動到頁面左邊100像素和頂部200像素的位置
  window.scrollTo(100,200)
  
  // 相對於當前視口向下滾動100像素
  window.scrollBy(0,100)
  
  // 相對於當前視口向右滾動40像素
  window.scrollBy(40,0)
  

4 其他不常用屬性

4.1 Screen客戶端屏幕

4.2 Navigator瀏覽器信息

轉載至