Javascript 在AMP安装时不调整Iframe的大小
我正在尝试整合一个雨果主题的论文,我正在使用AMP 我遵循了推荐的方法,因此我的Javascript 在AMP安装时不调整Iframe的大小,javascript,iframe,amp-html,disqus,hugo,Javascript,Iframe,Amp Html,Disqus,Hugo,我正在尝试整合一个雨果主题的论文,我正在使用AMP 我遵循了推荐的方法,因此我的amp-iframe在sandbox属性上具有allow-same-origin值,并且srcurl来自不同的域 iframe的我的代码: <amp-iframe width=600 height=180 layout="responsive" sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-for
amp-iframe
在sandbox属性上具有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>
工作正常,因此我的浏览器正常工作
在本页末尾,您可以找到iframe的示例:我发现了问题所在。我正在从一个子域subdomain.asur.dev
重定向到主域中的一个页面,如asur.dev/something
看起来iframe的初始AMP验证通过,一切正常,没有错误,但由于组件中的内部逻辑,iframe无法调整大小
当我将嵌入的HTML移动到一个完全独立的子域,没有重定向时,问题就解决了。如何为amp设置disqus。我对iframe没有完全显示(小尺寸)有问题。我还应该更改this.page.url=window.location代码>this.page.identifier=window.location.hash代码>或保持原样。没有收到任何验证错误吗?因为您直接使用了脚本标记here@Urock嵌入的页面不需要是有效的AMP页面。这正是我使用iframe的原因。是的,我混淆了嵌入大小请求将在AMP页面中,但该请求应在嵌入页面中,谢谢,有时我们无法控制嵌入iframe来添加此postMessage请求,在这种情况下,我们如何处理此请求
<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>