Disqus Iframe 不调整 AMP 安装的大小

Question

我正在尝试将 Disqus 集成到我正在使用 AMP 的 Hugo 主题上。

我遵循了推荐的 installation guide，所以我的 amp-iframe 在沙盒属性上有 allow-same-origin 值，而 src url 来自不同的域名。

我的 iframe 代码：

<amp-iframe width=600 height=180
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
    resizable
    src="https://subdomain.asur.dev#code">

    <div overflow
        tabindex=0
        role=button
        aria-label="Load more"
        style="display:block;font-size:12px;font-weight:500;font-family:Helvetica Neue, arial, sans-serif;text-align:center;line-height:1.1;padding:12px 16px;border-radius:4px;background:rgba(29,47,58,0.6);color:rgb(255,255,255)">
        Load more
    </div>
</amp-iframe>

我的嵌入代码：

<div id="disqus_thread"></div>
<script>
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event)
{
    if (event.data) {
        var msg;
        try {
            msg = JSON.parse(event.data);
        } catch (err) {
            // Do nothing
        }
        if (!msg)
            return false;

        if (msg.name === 'resize' || msg.name === 'rendered') {
            window.requestAnimationFrame(() => {
                window.parent.postMessage({
                sentinel: 'amp',
                type: 'embed-size',
                height: msg.data.height
                }, '*');
            });
        }
    }
}
</script>
<script>
    var disqus_config = function () {
        this.page.url = window.location;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = window.location.hash; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://shortname.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

我不太确定这是错误还是我做错了什么，但是 iframe resizing 上的 amp-example 工作正常，所以我的浏览器可以正常工作。

在这里，在页面的末尾，您可以找到 iframe 的示例：https://asur.dev/en/amperage/theme-kitchen-sink/

Answer 1

我找到问题了。我正在从子域 subdomain.asur.dev 重定向到主域中的页面，例如 asur.dev/something.

看起来 iframe 的初始 AMP 验证通过并且一切正常，没有错误，但由于组件中的内部逻辑，iframe 无法调整大小。

当我将嵌入 HTML 移动到一个没有重定向的完全独立的子域时，问题得到解决。

Disqus Iframe 不调整 AMP 安装的大小

Disqus Iframe not resizing on AMP installation

javascript

iframe

disqus

hugo

amp-html