分享一些有趣的 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!");
      }
    });
  }

  
  // 最后，若是执行到这里，说明用户已经拒绝对相关通知进行受权
  // 出于尊重，咱们不该该再打扰他们了
}