JavaScript 在浏览器中能直接调用的 API 是浏览器实现并暴露给 window 的接口，如 fetch()、localStorage、navigator.geolocation、document.querySelector()、IntersectionObserver 等，需检测存在性与上下文有效性。
JavaScript 能直接调用的浏览器 API 不是“所有 Web API”，而是仅限于运行在浏览器环境中的、由浏览器厂商实现并暴露给 window 或 globalThis 的那些接口。Node.js 等非浏览器环境默认不提供这些。
哪些 API 是 JavaScript 在浏览器里能直接用的？
不是 W3C 标准里的就一定能用，关键看当前浏览器是否已实现且未被禁用。常见可用 API 包括：
-
fetch()：发起网络请求（替代XMLHttpRequest），支持 Promise，但不自动带 cookie（需显式传credentials: 'include'） -
localStorage/sessionStorage：同步存储键值对，容量约 5–10MB，仅支持字符串，存对象要先JSON.stringify() -
navigator.geolocation：获取用户地理位置，必须由安全上下文（HTTPS 或localhost）触发，且用户授权后才可用 -
document.querySelector()和Element.addEventListener()：DOM 操作核心，注意事件监听器一旦绑定不会自动销毁，容易引发内存泄漏 -
IntersectionObserver：监听元素是否进入视口，比滚动监听更轻量，但 Safari 旧版本兼容性差（需检查typeof IntersectionObserver !== 'undefined'）
为什么有些 API 在控制台能用，但在脚本里报错？
常见原因不是 API 不存在，而是调用时机或上下文不对：
- 在 DOM 加载完成前访问
document.getElementById()→ 返回null，后续调用方法会报TypeError: Cannot read property 'xxx' of null - 在 iframe 或 sandboxed 页面中尝试调用
localStorage→ 触发SecurityError，因为沙箱策略禁用了持久存储 - 在 Service Worker 中调用
document或window相关 API → 报ReferenceError，因为 SW 没有 DOM 全局对象 - 使用
crypto.subtle时没在安全上下文（HTTP 非 localhost）→ 方法存在但调用时抛InvalidStateError
如何判断某个 API 当前浏览器是否可用？
别依赖文档查兼容性表，现场检测更可靠：
立即学习“Java免费学习笔记（深入）”；
- 检测全局变量是否存在：
if ('fetch' in window)或更稳妥的typeof window.fetch === 'function' - 检测构造函数：
if (typeof IntersectionObserver === 'function')，注意不能只写'IntersectionObserver' in window（IE11 会返回 true 但不可用） - 检测特性而非版本：
if ('requestIdleCallback' in window && 'timeout' in window.requestIdleCallback.toString())比查 UA 字符串靠谱得多 - 对异步 API 做 fallback：比如
fetch()不可用时降级到XMLHttpRequest，但要注意后者不支持AbortSignal
真正麻烦的不是“能不能用”，而是“什么时候能用”和“用错上下文会静默失败”。比如 navigator.permissions.query({ name: 'clipboard-read' }) 在非 HTTPS 下直接 resolve 为 { state: 'prompt' }，但调用 navigator.clipboard.readText() 仍会拒绝 —— 这类边界行为很难靠文档覆盖全，得实测。
