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

  
  // 最初，如果执行到这里，阐明用户曾经回绝对相干告诉进行受权
  // 出于尊重，咱们不应该再打搅他们了
}