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

全部開發(fā)者教程

JavaScript 入門教程

然冬 · 更新于 2020-04-27

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

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

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

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

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

這些對(duì)象在訪問(wèn)時(shí)開頭是小寫的！

1. Location

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

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

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

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

圖片描述

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

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

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

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

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

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

圖片描述

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

Node.js 文檔中的一張表就很好的描述了 URL 的各個(gè)組成部分，結(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 方法，用于刷新頁(yè)面。

只讀屬性 Window.navigator 會(huì)返回一個(gè) Navigator 對(duì)象的引用，可以用于請(qǐng)求運(yùn)行當(dāng)前代碼的應(yīng)用程序的相關(guān)信息。(MDN)

navigator 最常用到的就是 userAgent 屬性，通常簡(jiǎn)稱為 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è)備等信息，通常判斷平臺(tái)，如 ios、android，或者判斷瀏覽器都會(huì)使用這個(gè)屬性。

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

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

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

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

圖片描述

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

其他的一些處于試驗(yàn)性的特性，也會(huì)被放在 navigator 下。如以前申請(qǐng)媒體設(shè)備需要使用 navigator.getUserMedia，后來(lái)隨著特性的升級(jí)，變成了MediaDevices.getUserMedia()。

3. Screen

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

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

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

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

圖片描述

4. History

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

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

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

history.back();

圖片描述

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

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

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

實(shí)例演示
預(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>
  // 注冊(cè)路由
  document.querySelectorAll('.link').forEach(function(item) {
    item.addEventListener('click', function(e) {

      e.preventDefault();

      // 拿到需要注冊(cè)的地址
      let link = item.getAttribute('href');
      // 往history中添加一個(gè)歷史記錄   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)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

圖片描述

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

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

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

因?yàn)槁窂礁淖兒?，瀏覽器再次訪問(wèn)當(dāng)前地址，可能找不到這個(gè)地址對(duì)應(yīng)的資源。

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

5. 小結(jié)

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

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