[点晴永久免费OA]新 HTML 标签发布！搞定所有前端权限！

admin

2026年8月4日 15:4 本文热度 64

以往网页想要调用摄像头、麦克风、定位，全套流程都靠JavaScript硬编码实现。我们要手写一堆异步逻辑、捕获各种异常、持续监听权限状态，样板代码堆一大堆。

更头疼的是用户体验问题。很多网站一打开页面，冷不丁弹出授权弹窗，用户毫无防备，下意识直接点拒绝。一旦权限被拦截，麻烦事就来了：浏览器会永久屏蔽再次唤起弹窗，想要重新开启权限，只能引导用户钻进浏览器层层嵌套的设置面板，普通用户根本找不到入口，最后直接放弃使用功能。

现在WICG带来了实验性HTML新标签 <permission>，Chrome 144及以上版本已经支持。只用声明式HTML标签，就能搞定设备权限申请，既能精简代码，也能大幅优化授权交互。

这个标签到底强在哪

✅ 声明式写法：一行HTML替代数十行JS，不用手动调用浏览器权限API
✅ 原生控件自动渲染：浏览器自动生成授权按钮，文字跟随权限状态动态切换（未授权/已允许/已拒绝）
✅ 交互更人性化：只有用户主动点击按钮，才弹出授权窗口；就算之前拒绝权限，再次点击依旧能够唤起弹窗，不用手动修改浏览器设置
✅ 完善事件体系：授权成功、拒绝、关闭弹窗等行为，都提供事件回调，方便业务逻辑拓展

上手实操，直接复制可用

单个权限申请

极简写法，想要什么权限直接填入type属性

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

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

<!-- 获取高精度地理位置 -->
<permission type="geolocation" preciseLocation="true"></permission>

一次性申请多项权限

摄像头+麦克风同时授权，空格分隔权限类型即可

<permission type="camera microphone"></permission>

搭配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 id="geo-perm" type="geolocation"></permission>
<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';
  // 此处可以编写传统JS权限获取逻辑
}
</script>