自建 iframe 里为什么用不了 App Bridge

现象#

在自己的 iframe 里嵌入应用页面，window.shopify 是 undefined，调 App Bridge 的 Toast、ResourcePicker 全部报错，单独打开页面却正常。

原因#

• App Bridge 只在 admin 顶层 iframe 注入 host，嵌套 iframe 拿不到
• 页面缺 shopify-api-key meta，CDN 脚本无法识别应用身份
• CDN 的 app-bridge.js 始终是最新版，npm 包锁在旧版会导致 API 对不上
• 跨域 iframe 里父页面无法把 host 参数安全传给子页面

处理步骤#

1. 确认页面由 admin 直接加载，而不是再套一层自己的 iframe
2. 在 head 加 shopify-api-key 的 meta 标签
3. 引入 cdn.shopify.com/shopifycloud/app-bridge.js
4. 内嵌内容改为同源组件或跳转新窗口，不要嵌套 iframe
5. 升级 @shopify/app-bridge-react 到与 CDN 匹配的大版本

验收标准#

admin 内打开应用时 shopify.config.shop 有值，Toast 能弹出且控制台无报错。