怎样使用javascript操作浏览器api【教程】

浏览器API需按需调用且受安全上下文、执行时机、权限状态等严格约束：httpS/localhost为部分API强制要求；dom操作须确保节点存在；fetch需手动检查response.ok；Permissions API可预查授权状态。

javaScript 操作浏览器 API 不是“学一套通用方法”，而是按需调用具体接口——每个 API 解决一类实际问题，且行为受权限、上下文、安全策略严格约束。

哪些浏览器 API 必须在安全上下文中运行

现代浏览器强制要求部分 API 只能在 https:// 或 localhost 下使用，否则直接抛错或静默失败。

• navigator.geolocation.getCurrentPosition()：在 HTTP 页面中会触发 SecurityError
• navigator.mediaDevices.getUserMedia()：非安全上下文返回 NotAllowedError
• localStorage 和 sessionStorage 在某些隐私模式下可能被禁用或抛出 SecurityError

开发时务必检查控制台错误信息，而不是假设“代码没报错就一定生效”。本地开发可用 http://localhost:3000，但不能用 file:// 协议打开 html 文件来测试。

DOM 操作类 API 的常见误用点

看似简单的 document.getElementById() 或 querySelector() 经常出问题，核心原因是执行时机不对。

立即学习“Java免费学习笔记（深入）”；

• 脚本放在 里，但 DOM 尚未加载 → 返回 NULL
• 监听 click 但元素是后续通过 js 动态插入的 → 事件绑定失效
• 用 innerHTML 插入含 的字符串 → 脚本不会执行

推荐做法：用 DOMContentLoaded 事件包裹初始化逻辑，或把 放在 前；对动态内容用事件委托（如监听父容器的 click，再用 Event.target.matches('.btn') 判断）。

fetch() 与 XMLHttpRequest 的关键差异

两者都能发请求，但默认行为和错误处理逻辑完全不同，混用容易踩坑。

• fetch() 成功只表示网络可达，response.ok === false（如 404/500）仍算“成功”，必须手动检查
• XMLHttpRequest 的 onerror 会在网络失败、CORS 拒绝、超时时触发，而 fetch() 的 catch 只捕获网络异常，CORS 错误会表现为 TypeError: Failed to fetch
• fetch() 默认不带 cookie，需显式传 { credentials: 'include' }；XMLHttpRequest 默认携带

示例：正确处理 fetch() 的 HTTP 错误：

fetch('/api/data')   .then(r => {     if (!r.ok) throw new Error(`HTTP ${r.status}`);     return r.json();   })   .catch(err => console.error('请求失败:', err));

Permissions API 是唯一能预判用户是否授权的方式

别再靠“调用后弹窗 + try/catch”来判断权限状态。很多 API（如通知、定位、摄像头）支持提前查询当前权限状态。

• navigator.permissions.query({ name: 'notifications' }) 返回 'granted' / 'denied' / 'prompt'
• name 值必须准确：'geolocation'、'camera'、'microphone' 等，大小写敏感
• 返回 promise，但部分旧浏览器（如 safari ≤16.4）不支持，需降级为尝试调用后监听 PermissionDeniedError

权限状态会随用户操作实时变化，建议在关键操作前重新查询，而不是缓存一次结果长期使用。