第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

全部開發(fā)者教程

JavaScript 入門教程

然冬 · 更新于 2020-04-27

常用的 BOM 相關(guān)對象

通常與 BOM 相關(guān)的常用對象有：

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

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

這些內(nèi)容都可以通過 window 對象進(jìn)行訪問。

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

1. Location

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

與 location 相關(guān)的最常用的就是跳轉(zhuǎn)了。

給 location 的 href 屬性賦值，就可以實現(xiàn)頁面的跳轉(zhuǎn)。

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

圖片描述

還有另外兩種方式也可以實現(xiàn)頁面跳轉(zhuǎn)。

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

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

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

使用 replace 方法也可以跳轉(zhuǎn)到新頁面，但是調(diào)用后就無法再后退了。

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

圖片描述

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

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

┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                              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 對象的引用，可以用于請求運(yùn)行當(dāng)前代碼的應(yīng)用程序的相關(guān)信息。(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
// 不同設(shè)備的輸出不一定相同

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

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

除了 userAgent，其他的內(nèi)容用到的相對較少。

但也有比較有趣的屬性，比如 onLine，這個屬性可以用于判斷網(wǎng)絡(luò)狀態(tài)。

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

圖片描述

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

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

3. Screen

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

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

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

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

圖片描述

4. History

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

history 主要用于操作瀏覽器歷史相關(guān)的內(nèi)容，如前進(jìn)、后退。

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

history.back();

圖片描述

history 還可以實現(xiàn)前端路由。

通過 history.pushState 可以改變頁面的路徑，但不會觸發(fā)頁面的跳轉(zhuǎn)。

通過 popstate 事件監(jiān)聽頁面的歷史出棧操作。

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<section id="app">
  <a href="user" class="link">用戶中心</a>
  <a href="setting" class="link">設(shè)置</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-參數(shù) 1-title 2-url
      window.history.pushState({name: link}, link, link);

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

    }, false);
  });

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

圖片描述

通過 pushState 向歷史棧增加一條歷史，添加后根據(jù)路徑顯示對應(yīng)的頁面內(nèi)容。

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

觀察 network 會發(fā)現(xiàn)并沒有進(jìn)行頁面的跳轉(zhuǎn)。但需要注意的是刷新后可能會 404，這個時候就需要服務(wù)端處理跳轉(zhuǎn)或者代理服務(wù)器做配置。

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

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

5. 小結(jié)

BOM 相關(guān)的對象經(jīng)常會被使用到，但每個對象使用到的內(nèi)容并不是非常多。

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