如何让我的 iframe 在主机网站上自动调整高度？

Question

我正在创建网络小部件，我的客户将它们嵌入到他们的网站上。 iFrame 中的内容可以在运行时发生变化。如何让我的 iframe 像 disqus 的评论线程一样自动调整高度？

Answer 1

由于您是 iframe 的所有者，因此可以在 iframe 域和主机域之间建立通信。您可以使用以下代码

主办方javascript

正在发送消息

ifrm.contentWindow.postMessage("someUniqueMessageId", "*");

收到消息

window.addEventListener('message', function (event) {
if (event.data.hasOwnProperty("someUniqueMessageId")) {
        var data = event.data.someUniqueMessageId;
    }
});

在 iFrame javascript

window.addEventListener('message', function (event) {
   if (event.data == "someUniqueMessageId") {
        var foo = 'bar'; // data you want to send to host
        event.source.postMessage({ "someUniqueMessageId": foo }, "*");
    }
});

如何让我的 iframe 在主机网站上自动调整高度？

How to make my iframe auto height adjust on host website?

javascript

html

iframe

widget

disqus