嵌入 Example Capsule

Custom Element 方式

生产部署会提供一个不依赖宿主框架的 ESM 文件：

<script type="module" src="https://flamo.dev/embed-sdk/flamo-example.js"></script>

<flamo-example
  example="hello-flamo"
  base="https://flamo.dev"
  label="Hello Flamo"
  style="display:block;aspect-ratio:1.6;min-height:320px"
></flamo-example>

base 可以换成独立的 embed.flamo.dev 域名。Custom Element 自己创建受限 iframe，并处理就绪、错误和高度变化消息。

纯 iframe 方式

<iframe
  src="https://flamo.dev/embed/hello-flamo/?parentOrigin=https%3A%2F%2Fexample.com"
  title="Hello Flamo"
  sandbox="allow-scripts"
></iframe>

请把 parentOrigin 设置为宿主页面的精确 origin。不要同时授予 allow-same-origin；示例无需访问宿主 DOM、Cookie 或本地存储。

协议

iframe 向父页面发送 flamo.embed.v1 消息，当前支持 ready、resize、error。父页面必须同时验证 event.source 和协议字段。因为未授予 allow-same-origin 的 sandbox iframe 使用 opaque origin，父页面向它发送消息时只能以 * 为 targetOrigin；因此消息接收端还会校验父窗口引用与传入的精确 parentOrigin。