返回串口调试

技术知识库 & 调试文档 65 篇硬核手册

Web Serial Pro Multi-Module Offline Documentation Hub

主题 同步中 本地离线 知识库总览
ID: WEB-SERIAL-07 Web Serial API 浏览器接口与配置 (Browser API)

iFrame 沙箱限制与 Web Serial 接口调用的穿透解决方案

#H5 串口通信接口#在线串口调试助手#Chrome 串口权限设置

许多工控平台和物联网监控大屏采用 iframe 嵌套形式来加载第三方在线工具。但由于安全审计限制,网页调用 Web Serial API 会默认受阻。根因通常是父级页面的 Permission-Policy(权限策略) 未对 iframe 授权 serial

正确嵌入方式 在父页面 HTML 中显式写: ``html <iframe src="https://www.serialpro.top/" allow="serial"></iframe> ` allow="serial" 表示父窗口信任该子页面,并把串口物理访问权向下传递。只有配置后,iframe 内调用 navigator.serial.requestPort()` 时,用户才能看到系统原生端口选择框。

常见踩坑 - 跨域 + 无 allownavigator.serialundefined 或 requestPort 直接拒绝。 - 沙箱属性冲突:若同时写了 sandbox 且未放行必要能力,仍可能失败;尽量避免过度 sandbox,或按规范组合权限。 - 非安全上下文:iframe 自身也必须是 HTTPS 或 localhost,否则 Secure Context 不满足。 - 移动端 / 非 Chromium:Web Serial 本身不可用,与 iframe 无关。 联调建议:先在顶层标签页验证工具可连串口,再嵌 iframe;浏览器开发者工具 Application / Permissions 可核对策略。完成授权后,工控大屏即可内嵌免安装串口助手,而无需另装桌面软件。