角色卡前端为什么必须是同源 iframe

2026-09-28 · 前端 / 角色卡

现象

把界面 HTML 放在远程 CDN 上、用一行脚本加载进 iframe：界面显示得好好的，但里面的数据永远不更新。 控制台里会看到访问 window.parent 时被同源策略拦住。

原因

• 远程加载的 HTML 来自另一个域 ⇒ iframe 内的脚本无法访问父窗口对象。
• 而角色卡的状态栏/大厅需要读写宿主的变量、调用宿主的接口 —— 这些都在父窗口上。

三种注入形态的取舍

• 同源内联代码块：把完整 HTML（含脚本）内联进替换内容。脚本可执行、父窗口可访问 ⇒ 数据能动。体积大、改起来要动卡。
• 远程 CDN 外链：卡很小、更新方便，但跨域 ⇒ 只能展示，不能交互数据。
• 薄壳 + 远程：介于两者之间，展示类 UI 可以走，涉及变量的不行。

结论

要交互数据 → 内联（同源）；纯展示 → 外链。选错形态，后面所有调试都是白费。

附带的两个坑：① 某些围栏语法会被 Markdown 解析吃掉脚本里的符号；② 修改后必须让宿主重读页面（刷新），因为注入发生在页面侧。