记录一些在此之前不知道的Web API

2023-02-17 15:16:12 浏览数 (1)

Web API:https://developer.mozilla.org/zh-CN/docs/Web/API

首先回顾一下以前了解过的Web API(强确实强,但很少用到...)

Intersection Observer API 

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。

相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API 

Fullscreen API 

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式,并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。

相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Fullscreen_API

Notifications API 

Notifications API 允许网页控制向最终用户显示系统通知 —这些都在顶级浏览上下文视口之外,因此即使用户已经切换标签页或移动到不同的应用程序,也可以显示。该API被设计成与不同平台上的现有通知系统兼容。

相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Notifications_API

Resize Observer API 

Resize Observer API提供了一种高性能的机制,通过该机制,代码可以监视元素的大小更改,并且每次大小更改时都会向观察者传递通知。

相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Resize_Observer_API

Window.matchMedia

通过JS进行媒体查询,返回一个MediaQueryList对象,在页面满足指定的媒体查询规则时触发绑定的事件处理器;

代码语言:javascript复制
mqList = window.matchMedia(mediaQueryString); //返回MediaQueryList对象
MediaQueryList.addListener(MediaQueryListListener listener);
MediaQueryList.removeListener(MediaQueryListListener listener);

相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia 

MutationObserver

MutationObserver 接口提供了监视对 DOM 树所做更改的能力,它被设计为旧的 Mutation Events 功能的替代品,该功能是 DOM3 Events 规范的一部分。

相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver 

Broadcast Channel API

Broadcast Channel API 可以实现同 源 下浏览器不同窗口,Tab 页,frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。

代码语言:javascript复制
// 连接到广播频道
var bc = new BroadcastChannel('test_channel');
// 发送简单消息的示例
bc.postMessage('This is a test message.');
// 简单示例,用于将事件打印到控制台
bc.onmessage = function (ev) { console.log(ev); }
// 断开频道连接
bc.close()

相关文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Broadcast_Channel_API 

Encoding API 

Encoding API 提供了一种机制来处理各种字符编码文本,包括传统的非 UTF-8 编码。实现对字符串和字节流互转。

代码语言:javascript复制
//字符串转字节流
const encoder = new TextEncoder()
const view = encoder.encode('€')
console.log(view); // Uint8Array(3) [226, 130, 172]

//字节转字符串
let utf8decoder = new TextDecoder(); // default 'utf-8' or 'utf8'

let u8arr = new Uint8Array([240, 160, 174, 183]);
let i8arr = new Int8Array([-16, -96, -82, -73]);
let u16arr = new Uint16Array([41200, 47022]);
let i16arr = new Int16Array([-24336, -18514]);
let i32arr = new Int32Array([-1213292304]);

console.log(utf8decoder.decode(u8arr)); // 


	

0 人点赞