你不知道的几个非常实用的浏览器API

一、浏览器分享

if(navigator.share) {
    navigator.share({
        title: '文章标题',
        text: '文本内容',
        url: location.href,
    });
}

二、广播通道

允许在同源的不同浏览器窗口、标签页、iframe 或者 web worker 之间进行通信。

const bc = new BroadcastChannel('login');
bc.postMessage({ token: 'abc1111' });
bc.onmessage = (e) => console.log(e.data);

三、格式化数字

new Intl.NumberFormat('zh-CN').format(1234567); // 输出：1,234,567

四、监听元素尺寸变化

const ro = new ResizeObserver((entries) => {
    entries.forEach((e) => console.log('尺寸变化', e.contentRect));
});
ro.observe(chartContainer);

五、浏览器复制

await navigator.clipboard.writeText('COUPON2025');
await navigator.clipboard.readText();

六、中断请求

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // 立即中断请求

七、空闲回调

requestIdleCallback 允许你在浏览器的主线程空闲时执行回调函数，这样可以避免在主线程繁忙时执行代码而导致页面卡顿。

requestIdleCallback(() => {
    // 在主线程空闲时执行
});