本文主要是介绍2 html5 浏览器已经支持的新API，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
HTML5规范下很多API浏览器都已经支持，这里我们列举几个很常用的浏览器支持的API:
1 tab页之间通信:
BroadcastChannel(channelName);
可用于多个不同浏览器tab页之间通信。实例化的时候Channel名称必须相同。
const broadcastChannel = new BroadcastChannel('myChannel')broadcastChannel.postMessage('Hello from tab 1');使用postMessage 发送消息，并在另一个窗口监听消息
broadcastChannel.onmessage = function(e) {
console.log('Received:', e.data);
};
这里的postMessage，和 onMessage 事件，你可能在ifram和父窗体通信时你也用过。
2 浏览器全屏：
requestFullscreen()
img, video, div元素等加上这个方法就可以实现全屏，使用document.exitFullscreen();退出全屏。
3 屏幕分享：
navigator.mediaDevices.getDisplayMedia() 这个就是将当前指定的屏幕分享出去。我们如下当代是将截取内容放在播放器中播放。
const stream = await navigator.mediaDevices.getDisplayMedia({video: true,});videoElement.srcObject = stream;当然看到这个mediaDevices，这个对象目前可以使用的还有：
1 获取摄像头
navigator.mediaDevices.getUserMedia()
2 获取设备信息:
navigator.mediaDevices.enumerateDevices()
4 网络状态
navigator.onLine
以及给window增加了两个事件
window.ononline = function () {console.log("你的浏览器在线工作");};window.onoffline = function () {console.log("你的浏览器离线工作");};5 requestAnimationFrame实现浏览器绘制帧时的调用
这个api可用来替代使用interval回调时动画都问题。当然vue底层也用了这个新的api.
var ball = document.getElementById("ball");var pos = 0;function moveBall() {if (pos == 350) {return; // 如果到达指定位置则停止动画} else {pos += 1;ball.style.top = pos + "px";ball.style.left = pos + "px";window.requestAnimationFrame(moveBall); // 继续下一帧动画}}// 启动动画window.requestAnimationFrame(moveBall);6 Clipboard 粘贴板对象，当然这对象功能也很强大。
通过writeText写入内容，通过 readText读取复制内容。
navigator.clipboard.writeText(text).then(function() {console.log("复制成功！");}, function() {console.log("复制失败！");});7 MutationObserver DOM变化监听
说到这个Api,你可能之前使用过insertBefore()甚至自己封装了insertAfter(),但是更为详细的监听，html5 浏览器已经实现了MutationObserver，利用这个对象可以实现更详细的dom变化的监听。
// Observer需要一个用于监听的目标DOMconst targetNode = document.getElementById("app");//用于确定mutation监听变化的范围const config = {attributes: true, // 监听目标节点的属性变化，例如id，class等属性childList: true, // 除目标节点外还要监听目标节点的直接子节点subtree: true, // subtree的范围大于childList，还包括子节点childrencharacterData: true, // 监听TextNode需要额外配置，默认TextNode变化不会触发callback};// 当观察到变动时执行的回调函数，mutationsList包含本次变更的信息const callback = function (mutationsList, observer) {console.log(mutationsList);};const observer = new MutationObserver(callback);observer.observe(targetNode, config);8 scrollIntoView 快速滚动到指定的元素位置。
这是一个dom新增的方法，可以配合一个behavior: "smooth",block: "start"即可实现平滑滚动。
document.body.scrollIntoView({behavior: "smooth",block: "start",});等等，还有一些其他的，比如formData,fileRender等等这些大家平时用的比较多的，我这里就不再举例。还有canvas这种，svg等这些后面我会单独拿出来讲。
这篇关于2 html5 浏览器已经支持的新API的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
