求助：AMP Web Story中amp-iframe已配置权限仍无法点击

针对你遇到的AMP Web Story里<amp-iframe>嵌入游戏无法点击的问题，可以从以下几个方向排查修复：

1. 补充sandbox的指针事件权限 #

AMP的<amp-iframe>默认sandbox会限制指针事件，需要明确添加allow-pointer-events权限，确保iframe内的交互能被触发。修改后的sandbox属性如下：

sandbox="allow-scripts allow-popups allow-modals allow-forms allow-top-navigation-by-user-activation allow-pointer-events"

2. 检查层叠上下文与元素覆盖 #

确认游戏页面的amp-story-grid-layer没有被其他层覆盖。如果页面存在多个amp-story-grid-layer，后续的layer会叠加在前面的layer之上，可能遮挡iframe。当前你的游戏页面只有一个fill模板的layer，这部分没问题，但如果后续新增了layer需要注意顺序。

3. 确保iframe容器没有禁用指针事件 #

检查.iframe-container的CSS样式，避免设置pointer-events: none，如果有这个属性会阻止点击事件穿透到iframe内。可以添加如下CSS确保容器允许指针事件：

.iframe-container {
  pointer-events: auto;
  width: 100%;
  height: 100%;
}

修改后的完整游戏页面代码 #

<!-- Game Page -->
<amp-story-page id="game">
    <amp-story-grid-layer template="fill">
        <div class="iframe-container">
            <amp-iframe width="500" height="600" layout="responsive"
                sandbox="allow-scripts allow-popups allow-modals allow-forms allow-top-navigation-by-user-activation allow-pointer-events"
                src="https://example.com/amp/match.php">
              <amp-img layout="fill" src="assets/download.jpg" placeholder></amp-img>
                <p>Sorry, your browser doesn't support this feature.</p>
            </amp-iframe>
        </div>
    </amp-story-grid-layer>
</amp-story-page>

另外，还要确保外部游戏页面本身没有禁用交互，比如游戏代码中是否有依赖父页面的某些权限，或者是否存在跨域相关的限制（不过sandbox已经配置了必要的脚本权限，这部分如果游戏本身没问题的话应该可以解决）。

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