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需要一个用于监听的目标DOM
      const targetNode = document.getElementById("app");

      //用于确定mutation监听变化的范围
      const config = {
        attributes: true, // 监听目标节点的属性变化,例如id,class等属性
        childList: true, // 除目标节点外还要监听目标节点的直接子节点
        subtree: true, // subtree的范围大于childList,还包括子节点children
        characterData: 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",
  });

9 Notification通知消息

 var notification = new Notification("通知标题", {
          body: "通知内容",
          icon: "notif-icon.png",
        });

等等,还有一些其他的,比如formData,fileRender等等这些大家平时用的比较多的,我这里就不再举例。还有canvas这种,svg等这些后面我会单独拿出来讲。 

你可能感兴趣的:(前端新学,html5,前端,html)