亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

全部開發者教程

JavaScript 入門教程

然冬 · 更新于 2020-04-27

常用的 BOM 相關對象

通常與 BOM 相關的常用對象有：

  • Location 當前頁面地址相關信息，如當前頁面地址
  • Navigator 當前瀏覽器相關信息，如瀏覽器版本
  • Screen 包含屏幕相關信息，如屏幕的長寬
  • History 瀏覽器的歷史相關信息，如返回上一頁

其他的還有一些輔助方法，如 alert、confirm。

這些內容都可以通過 window 對象進行訪問。

這些對象在訪問時開頭是小寫的！

1. Location

window.location 只讀屬性，返回一個 Location 對象，其中包含有關文檔當前位置的信息。(MDN)

與 location 相關的最常用的就是跳轉了。

給 location 的 href 屬性賦值，就可以實現頁面的跳轉。

window.location.href = '//imooc.com';

圖片描述

還有另外兩種方式也可以實現頁面跳轉。

window.location = '//imooc.com';

window.location.assign('//imooc.com');

用的比較的多的就是修改 href 屬性。

使用 replace 方法也可以跳轉到新頁面，但是調用后就無法再后退了。

location 下還有其他與路徑相關的信息，可以通過輸出到控制臺觀察。

圖片描述

  • origin 源，相當于協議與主機、主域的組合，具有兼容性問題
  • protocol 協議
  • host 主機名和當前 URL 的端口號
  • hostname 當前 URL 的主機名
  • port 端口
  • pathname 路徑部分
  • search 查詢字符串
  • hash hash值(#后面部分)
  • href 當前 URL

Node.js 文檔中的一張表就很好的描述了 URL 的各個組成部分，結合表更好理解這些屬性。

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                              href                                              │
├──────────┬──┬─────────────────────┬────────────────────────┬───────────────────────────┬───────┤
│ protocol │  │        auth         │          host          │           path            │ hash  │
│          │  │                     ├─────────────────┬──────┼──────────┬────────────────┤       │
│          │  │                     │    hostname     │ port │ pathname │     search     │       │
│          │  │                     │                 │      │          ├─┬──────────────┤       │
│          │  │                     │                 │      │          │ │    query     │       │
"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          │  │          │          │    hostname     │ port │          │                │       │
│          │  │          │          ├─────────────────┴──────┤          │                │       │
│ protocol │  │ username │ password │          host          │          │                │       │
├──────────┴──┼──────────┴──────────┼────────────────────────┤          │                │       │
│   origin    │                     │         origin         │ pathname │     search     │ hash  │
├─────────────┴─────────────────────┴────────────────────────┴──────────┴────────────────┴───────┤
│                                              href                                              │
└────────────────────────────────────────────────────────────────────────────────────────────────┘

另外常用的還有 reload 方法，用于刷新頁面。

只讀屬性 Window.navigator 會返回一個 Navigator 對象的引用，可以用于請求運行當前代碼的應用程序的相關信息。(MDN)

navigator 最常用到的就是 userAgent 屬性，通常簡稱為 UA。

console.log(navigator.userAgent);

// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36
// 不同設備的輸出不一定相同

該屬性包含了一些瀏覽器、操作系統、設備等信息，通常判斷平臺，如 ios、android，或者判斷瀏覽器都會使用這個屬性。

但 userAgent 并不是很準確，特別是一些被拉黑名單的第三方的瀏覽器廠商，通過偽造 UA 欺騙網站，防止被攔截，比如通將 UA 設置成某個版本的 Chrome 瀏覽器，達到偽造瀏覽器的目的。

除了 userAgent，其他的內容用到的相對較少。

但也有比較有趣的屬性，比如 onLine，這個屬性可以用于判斷網絡狀態。

console.log(navigator.onLine); // true or false

圖片描述

如果網站需要支持 i18n (國際化)，還會用到 language 屬性。

其他的一些處于試驗性的特性，也會被放在 navigator 下。如以前申請媒體設備需要使用 navigator.getUserMedia，后來隨著特性的升級，變成了MediaDevices.getUserMedia()。

3. Screen

返回當前window的screen對象。screen對象實現了Screen接口，它是個特殊的對象，返回當前渲染窗口中和屏幕有關的屬性。(MDN)

想要獲取當前瀏覽器所在屏幕的分辨率，就可以通過 screen 的 width 和 height 來獲取。

var screenWidth = window.screen.width;
var screenHeight = window.screen.height;

console.log('分辨率: ' + screenWidth + 'x' + screenHeight);

圖片描述

4. History

Window.history是一個只讀屬性，用來獲取History 對象的引用，History 對象提供了操作瀏覽器會話歷史（瀏覽器地址欄中訪問的頁面，以及當前頁面中通過框架加載的頁面）的接口。(MDN)

history 主要用于操作瀏覽器歷史相關的內容，如前進、后退。

通常用的最多的就是 history.back()，即返回上一頁。

history.back();

圖片描述

history 還可以實現前端路由。

通過 history.pushState 可以改變頁面的路徑，但不會觸發頁面的跳轉。

通過 popstate 事件監聽頁面的歷史出棧操作。

實例演示
預覽 復制
復制成功！
<section id="app">
  <a href="user" class="link">用戶中心</a>
  <a href="setting" class="link">設置</a>

  <div class="container"></div>
</section>

<script>
  // 注冊路由
  document.querySelectorAll('.link').forEach(function(item) {
    item.addEventListener('click', function(e) {

      e.preventDefault();

      // 拿到需要注冊的地址
      let link = item.getAttribute('href');
      // 往history中添加一個歷史記錄   0-參數 1-title 2-url
      window.history.pushState({name: link}, link, link);

      // 具體要做的業務
      document.querySelector('.container').innerHTML = link;

    }, false);
  });

  // 監聽路由
  window.addEventListener('popstate', function(e) {
    console.log({
      location: location.href,
      state: e.state
    });
    document.querySelector('.container').innerHTML = e.state.name;
  }, false);
</script>
運行案例 點擊 "運行案例" 可查看在線運行效果

圖片描述

通過 pushState 向歷史棧增加一條歷史，添加后根據路徑顯示對應的頁面內容。

當 popstate 監聽到出棧的時候就可以拿到上一條頁面棧的頁寫信息，可以做一些其他操作，如還原上一個頁面內容。

觀察 network 會發現并沒有進行頁面的跳轉。但需要注意的是刷新后可能會 404，這個時候就需要服務端處理跳轉或者代理服務器做配置。

因為路徑改變后，瀏覽器再次訪問當前地址，可能找不到這個地址對應的資源。

這是前端路由的一種實現方式，采用 History API，也是面試中會經?？嫉降念}目。另一種方式是使用 hash 實現，兼容性更好，并且不需要服務端或代理服務器做配合實現。

5. 小結

BOM 相關的對象經常會被使用到，但每個對象使用到的內容并不是非常多。

通過對象的名字也可以知道其大致的作用，所以當碰到某些需求，如 “瀏覽器的某些信息” 的時候，就應該想到 Navigator 對象下有沒有可以幫助實現需求的內容。