一个新 HTML 标签！搞定所有前端权限！

在 <permission> 标签出现之前，Web应用请求设备权限完全依赖JavaScript代码，开发者需要手动编写异步逻辑、处理权限状态、兼容异常场景，不仅代码繁琐，还存在体验痛点：权限弹窗会在页面加载或功能触发时自动弹出，容易引起用户反感；权限被拒绝后，无法再次直接唤起授权框，只能引导用户手动修改浏览器设置，操作成本极高。

而 <permission> 是HTML的实验性新标签（WICG草案，Chrome 144+支持），用声明式语法替代原生JS，让权限请求更简洁、用户体验更友好。

一、核心作用

• 声明式语法：直接在HTML写权限需求，无需复杂JS
• 原生UI按钮：自动渲染为权限按钮，文字随权限状态（未授权/已授权/拒绝）自动更新
• 用户友好：点击按钮才弹授权框，拒绝后可重复触发，不用进浏览器设置修改
• 事件监听：支持授权、拒绝、弹窗关闭等状态回调

二、基础用法（代码示例）

1. 单权限请求

<!-- 摄像头权限 -->
<permission type="camera"></permission>

<!-- 麦克风权限 -->
<permission type="microphone"></permission>

<!-- 精准定位权限 -->
<permission type="geolocation" preciseLocation="true"></permission>

2. 多权限同时请求

<!-- 同时请求摄像头+麦克风 -->
<permission type="camera microphone"></permission>

3. 搭配JS事件监听

<permission id="perm-camera" type="camera"></permission>
<p id="status"></p>

<script>
const permEl = document.getElementById('perm-camera');
const statusEl = document.getElementById('status');

// 权限授权
permEl.addEventListener('grant', () => {
  statusEl.textContent = '✅ 摄像头权限已授予';
});

// 权限拒绝
permEl.addEventListener('deny', () => {
  statusEl.textContent = '❌ 摄像头权限已拒绝';
});

// 弹窗关闭
permEl.addEventListener('promptdismiss', () => {
  statusEl.textContent = 'ℹ️ 权限弹窗已关闭';
});
</script>

三、关键属性

• type：权限类型（必选）
• • camera：摄像头
  • microphone：麦克风
  • geolocation：定位
  • 多权限用空格分隔
• preciseLocation：定位时开启高精度（可选）
• isValid：只读，判断元素是否可激活

四、兼容性提示

目前仅Chrome 144+支持，生产环境建议渐进增强：

<!-- 现代浏览器：<permission> -->
<permission id="geo-perm" type="geolocation"></permission>

<!-- 旧浏览器：传统JS按钮兜底 -->
<button id="geo-fallback" style="display:none;">获取位置</button>

<script>
// 不支持<permission>时显示兜底按钮
if (!window.customElements.get('permission')) {
  document.getElementById('geo-perm').style.display = 'none';
  document.getElementById('geo-fallback').style.display = 'inline-block';
}
</script>

总结

1. 传统权限请求依赖JS，代码复杂、体验差，拒绝后难以重新授权；
2. <permission> 用HTML标签实现权限请求，简洁易用，用户可自主触发授权；
3. 搭配事件监听和兼容性兜底，能高效实现Web权限管理。