javascript - 内容更新后更改 iframe 高度

Question

我的页面上有一些选项卡，并且该页面的一个选项卡内有一个 iframe (#quiz_iframe)。该 iframe 是测验框架，包含在 div (.quiz-div) 中。点击按钮 (.start-quiz) 后，测验将被加载，并且新的 div (.quiz-content) 出现在 (.quiz-div)< 内。在测验内容中，我还有另外 20 个 div (.quiz-question)，它们是分页的，因此单击“下一个”、“上一个”按钮后，您可以隐藏或显示 5 个下一个/上一个 div。

重点是，我想在单击 .start-quiz 后根据该内容调整 iframe 高度，但我不知道如何操作。

现在我有了一个可以正常工作的代码，当 iframe 第一次加载时(它根据加载的内容调整高度)

function iframeLoaded() {
  var iFrameID = document.getElementById('quiz_iframe');
  if(iFrameID) {
        iFrameID.height = "";
        iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }   

}

<iframe onload="iframeLoaded()" id="quiz_iframe" src="'.$link.'" style="width:100%;"></iframe>'

如何修改该代码，以便在每次 .quiz-div 高度更改时更新 iframe 高度？是的，iframe 位于同一域中:)

谢谢!

Answer 1

您可以使用基于postMessage的解决方案您还必须在 iframe 和父页面中包含一些 JavaScript。

在您的 iframe 中:

window.addEventListener("load", function() {
    parent.postMessage(getDocumentHeight(), "*");
});

在您的父页面中:

function receiveIframeHeight(frameWindow, height) {
    $("iframe").each(function () {
        if (this.contentWindow === frameWindow) this.height = height;
    });
};
window.addEventListener("message", function (e) {
    receiveIframeHeight(e.source, e.data);
});

您现在可以监听调整大小事件并从 iframe 向父页面发送消息。但要注意无限循环。

要查看完整代码，您应该查看此 Github 存储库 iframe-autoheight-using-postmessage