分享一些有趣的 Web APIs

分享一些有趣的 Web APIs

Web API 簡介

MDN 文檔： https://developer.mozilla.org...

在使用 JavaScript 編寫 Web 應用時，有許多 Web API 可供調用。

一些有趣的 Web APIs

Element.scrollIntoView

MDN 文檔： https://developer.mozilla.org...

定義：Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。

場景：錨點跳轉、回到頂部、去到底部

使用：

element.scrollIntoView(); // 等同於 element.scrollIntoView(true) 
element.scrollIntoView(alignToTop); // Boolean 型參數 
element.scrollIntoView(scrollIntoViewOptions); // Object型參數

// 參數 alignToTop 是一個 Boolean 值，用來指定對齊方式
// 參數 scrollIntoViewOptions 是一個對象，用來定義動畫過渡效果和對齊方式

補充：該 API 還有一個變體，Element.scrollIntoViewIfNeeded() 方法用來將不在瀏覽器窗口的可見區域內的元素滾動到瀏覽器窗口的可見區域。

示例：回到頂部

const rootEl = document.getElementsByTagName('html')[0]

if (rootEl.scrollIntoView) {
  rootEl.scrollIntoView({ behavior: 'smooth' })
  return
}

// Fix incompatible browser
document.documentElement.scrollTop = document.body.scrollTop = 0

示例：去到底部

const rootEl = document.getElementsByTagName('html')[0]

if (rootEl.scrollIntoView) {
  rootEl.scrollIntoView({ behavior: 'smooth', block: 'end' })
  return
}

// Fix incompatible browser
const documentHeight = document.body.offsetHeight || document.body.scrollHeight
document.documentElement.scrollTop = document.body.scrollTop = documentHeight

示例：滾動到指定元素：

const targetBtn = document.getElementById('target')
const targetEl = document.getElementById('targetEl')

targetBtn.addEventListener('click', () => {
  targetEl.scrollIntoViewIfNeeded({ behavior: 'smooth' })
})

Page Visibility API

MDN 文檔： https://developer.mozilla.org...

定義：Page Visibility API 用來查看當前頁面的可見性狀態。

場景：咱們在不少地方都須要判斷用戶是否是在當前頁面，若是離開了當前頁面咱們須要捕捉到並進行一些操做。例如：當視頻處於播放狀態時，咱們須要判斷用戶是否是在當前頁面以繼續播放，若是離開了咱們須要暫停播放。

使用：當用戶最小化窗口或切換到另外一個選項卡時，瀏覽器會觸發一個 visibilitychange 事件，讓監聽者知道頁面狀態已更改，你能夠監聽該事件並執行某些操做。使用 document.hidden、document.visibilityState 屬性查看頁面可見性狀態。

// 監聽頁面可見屬性的改變
// 若是頁面是隱藏狀態，則暫停視頻；若是頁面是展現狀態，則播放視頻
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    videoEl.pause()
  } else {
    videoEl.play()
  }
})

兼容性代碼：

let hidden, visibilityChange
if (typeof document.hidden !== 'undefined') {
  hidden = 'hidden'
  visibilityChange = 'visibilitychange'
} else if (typeof document.msHidden !== 'undefined') {
  hidden = 'msHidden'
  visibilityChange = 'msvisibilitychange'
} else if (typeof document.webkitHidden !== 'undefined') {
  hidden = 'webkitHidden'
  visibilityChange = 'webkitvisibilitychange'
}

Intersection Observer API

MDN 文檔： https://developer.mozilla.org...

定義：檢測元素的可視狀態或者兩個元素的相對可視狀態。

這個 API 覆蓋最廣的場景是「若是兩個元素髮生的交集部分在 N% 左右，我須要作處理一些事情（執行回調）」

場景：

• 當頁面滾動時，懶加載圖片或請求接口。
• 商品列表頁，監聽頁面可視區域內的商品，而後記錄商品曝光次數；
• 爲計算廣告收益，檢測其廣告元素的曝光狀況；
• 根據用戶是否能看見相應區域來開始執行任務或動畫。

使用：Intersection Observer API 容許你配置一個回調函數，每當目標元素（target）與設備視窗（root）或者其餘指定元素髮生交集的時候執行。

const options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  // 閾值爲 0   意味着目標元素 **開始出現** 在 root 選項指定的元素中時，回調函數將會被執行。
  // 閾值爲 1.0 意味着目標元素 **徹底出現** 在 root 選項指定的元素中時，回調函數將會被執行。
  threshold: 0,
}

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log('元素可見')
    } else {
      console.log('元素不可見')
    }
  })
}

// 建立一個 IntersectionObserver對象，並傳入相應參數和回調用函數，
// 該回調函數將會在目標(target)元素和根(root)元素的交集大小超過閾值(threshold)規定的大小時候被執行。
const observer = new IntersectionObserver(callback, options)

let target = document.querySelector('#listItem')
observer.observe(target)

FullScreen API

MDN 文檔： https://developer.mozilla.org...

定義：FullScreen API 可讓一個元素與其子元素佔據整個屏幕，並在此期間，從屏幕上隱藏全部的瀏覽器用戶界面以及其餘應用。

場景：幻燈片演講、網頁遊戲、信息流網站、視頻等

使用：

1. 瀏覽器是否支持全屏模式：document.fullscreenEnabled
2. 進入全屏模式：Element.requestFullscreen()
3. 退出全屏模式：document.exitFullscreen()
4. 檢查當前是否有節點處於全屏狀態：document.fullscreenElement
5. 進入/離開全屏時 觸發事件：fullscreenchange
6. 進入全屏失敗時 觸發事件: fullscreenerror

Chrome 下的全屏表現：

1. 隱藏標籤欄、書籤欄
2. 將要全屏的元素充滿整個屏幕，並隱藏其餘元素
3. 能夠多層全屏
4. 進入全屏時，瀏覽器有一個默認的提示：按 ESC/F11 便可退出全屏模式

// 這是 FullScreen API 的演示，在此例中，網頁中顯示了一個視頻。 
// 按下 Enter 鍵讓用戶在視頻的窗口顯示和全屏顯示之間切換。
function toggleFullScreen() {
  // 檢查當前是否有節點處於全屏狀態
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    }
  }
}

document.addEventListener('keydown', (e) => {
  if (e.keyCode == 13) {
    toggleFullScreen()
  }
})

兼容性代碼：

function toggleFullScreen() {
  if (!document.mozFullScreen && !document.webkitFullScreen) {
    if (videoEl.mozRequestFullScreen) {
      videoEl.mozRequestFullScreen()
    } else {
      videoEl.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
    }
  } else {
    if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else {
      document.webkitCancelFullScreen()
    }
  }
}

多層全屏：

const outerBtn = document.getElementById('outer')
const innerBtn = document.getElementById('inner')
const outerBox = document.querySelector('.outer-box')
const innerBox = document.querySelector('.inner-box')

outerBtn.addEventListener('click', () => {
  outerBox.requestFullscreen()
})
innerBtn.addEventListener('click', () => {
  innerBox.requestFullscreen()
})

Notification API

MDN 文檔： https://developer.mozilla.org...

定義：Notification API 是 HTML5 新增的桌面通知 API，用於向用戶顯示通知信息。該通知是脫離瀏覽器的，即便用戶沒有停留在當前標籤頁，甚至最小化了瀏覽器，該通知信息也同樣會置頂顯示出來。

場景：發送用戶訂閱的消息，網站內容更新提醒等，提醒有人關注了。

使用：實例化一個 Notification 對象便可。

假定有以下 HTML：

<button onclick="notifyMe()">Notify me!</button>

接下來發送一條通知：

function notifyMe() {
  // 先檢查瀏覽器是否支持
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // 檢查用戶是否贊成接受通知
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // 不然咱們須要向用戶獲取權限
  else if (Notification.permission !== 'denied') {
    Notification.requestPermission(function (permission) {
      // 若是用戶贊成，就能夠向他們發送通知
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  
  // 最後，若是執行到這裏，說明用戶已經拒絕對相關通知進行受權
  // 出於尊重，咱們不該該再打擾他們了
}