AMP iframe动态src问题：如何获取嵌入页面URL并传递给应用？

嘿，我看你在AMP环境里尝试用amp-script和AMP State动态更新iframe的src时遇到了卡点，这其实是AMP组件规则和状态绑定里的常见问题，我来给你梳理下可行的解决方案：

先说说你当前方案可能踩的坑 #

1. AMP State未初始化：你绑定的[src]="dynamicUrl"没有对应的初始状态，AMP的绑定系统没法识别这个变量
2. 组件嵌套违规：把amp-iframe嵌套在amp-script里不符合AMP的组件使用规范，会导致上下文混乱
3. URL处理不严谨：window.AMP.win的访问时机可能有问题，而且没对URL参数做编码，容易出现链接解析错误

一步步解决的方案 #

1. 先初始化AMP State #

首先得在页面里定义好初始的状态变量，让AMP知道dynamicUrl是什么。在页面<body>的最开头加上这段：

<amp-state id="pageState">
  <script type="application/json">
    {
      "dynamicUrl": "https://website.com/dev/html"
    }
  </script>
</amp-state>

这里我们用pageState作为状态容器，避免和其他全局变量冲突。

2. 调整组件结构，别嵌套amp-iframe和amp-script #

AMP对组件嵌套有严格要求，把它们分开写更稳妥，同时给amp-script设layout="nodisplay"，不用占用页面空间：

<!-- 专门处理状态更新的amp-script -->
<amp-script layout="nodisplay" src="https://cdn.website.com/script.js"></amp-script>

<!-- 绑定状态的amp-iframe -->
<amp-iframe 
  height="150" 
  resizable 
  sandbox="allow-scripts allow-same-origin allow-popups allow-forms" 
  frameborder="0" 
  src="https://website.com/dev/html" 
  [src]="pageState.dynamicUrl"
>
  <div overflow tabindex="0"></div>
</amp-iframe>

3. 修正JS脚本的逻辑 #

调整你的脚本，确保正确获取页面URL并更新状态，同时处理好AMP的初始化时机：

function checkForAmp(method) {
  if (window.AMP && typeof window.AMP.setState === "function") {
    method();
  } else {
    setTimeout(() => checkForAmp(method), 50);
  }
}

function getUrlAndUpdateWidget() {
  // amp-script的上下文就是当前AMP页面的窗口，直接用window.location更可靠
  const currentPagePath = `${window.location.origin}${window.location.pathname}`;
  // 一定要对URL参数编码，避免特殊字符破坏链接结构
  const encodedPath = encodeURIComponent(currentPagePath);
  const newIframeSrc = `https://website.com/dev/html?dynamic-url=${encodedPath}`;
  
  // 更新我们定义的pageState里的dynamicUrl
  window.AMP.setState({
    pageState: {
      dynamicUrl: newIframeSrc
    }
  });
}

// 脚本加载完成后触发检查
checkForAmp(getUrlAndUpdateWidget);

4. 确保amp-script的权限合规 #

你的脚本CDN需要满足AMP的要求：

• 必须是HTTPS链接
• 服务器要返回正确的CORS响应头（比如Access-Control-Allow-Origin: *或者指定你的AMP页面域名）
• 脚本里只能用AMP允许的API（我们这里只用到AMP.setState，是合规的）

最后验证下 #

• 打开Chrome的DevTools，切换到「AMP」标签页，看看有没有报错信息
• 在Console里执行AMP.getState('pageState')，确认状态是否正确更新
• 检查amp-iframe的src是否在页面加载后变成带参数的链接

这样调整后，应该就能正常获取嵌入页面的URL并动态更新iframe的src了。

内容的提问来源于stack exchange，提问作者Rafael