10 个 JS 神级 API

每个 API 都附 浏览器支持率 + 30 秒上手代码 + 真实业务场景，复制即用，今晚下班早！

支持率： 97%（Chrome 13+、Edge 12+）
场景： 用户切标签页时暂停视频、停止轮询

CODE

document.addEventListener('visibilitychange', () => {   document.visibilityState === 'hidden'     ? video.pause()     : video.play(); });

支持率： 92%（需 HTTPS）
场景： 把当前文章内容分享到微信、微博

CODE

if (navigator.share) {   navigator.share({     title: '我的新文章',     text: '快来看看',     url: location.href,   }); }

支持率： 94%（Chrome 54+）
场景： A 标签页登录，B 标签页自动刷新

CODE

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

支持率： 100%
场景： 价格、股票、报表格式化

CODE

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

支持率： 97%（Chrome 51+）
场景： 图片懒加载、广告曝光统计

CODE

const io = new IntersectionObserver((entries) => {   entries.forEach((e) => e.isIntersecting && loadImg(e.target)); }); io.observe(img);

支持率： 94%（Chrome 64+）
场景： 响应式图表、虚拟滚动

CODE

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

支持率： 95%（需 HTTPS）
场景： 一键复制邀请码、优惠券码

CODE

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

支持率： 100%
场景： 路由、埋点、搜索参数

CODE

const params = new URLSearchParams(location.search); params.get('id'); // ?id=123

支持率： 100%
场景： 取消过期请求、防抖动

CODE

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

支持率： 95%（Chrome 47+、Edge 79+）
场景： 埋点、预加载、长计算零阻塞

CODE

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

Loading comments...