在内容更新后更改iframe高度

Change iframe height after content update

本文关键字：iframe 高度 更新      更新时间：2023-09-26

我的页面上有一些选项卡，在该页面的一个选项卡中，我有一个iframe (#quiz_iframe)。这个iframe是问答框架，它包含在div (.quiz-div)中。点击按钮(.start-quiz)后，测试被加载，新的div (.quiz-content)出现在(.quiz-div)中。在测试内容中，我有20个另外的div (.quiz-question)，它们是分页的，所以在单击next、prev按钮后，您可以隐藏或显示5个next/prevdiv。

重点是，在点击.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>'

如何修改该代码，在每次.quizdiv高度更改时更新iframe高度？是的，iframe在同一个域中：）

谢谢！

您可以使用基于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发布到父页面。但要注意无限循环。

要查看完整的代码，您应该使用postmessage 查看Github repo iframe autoheight

在jQuery中，您可以使用

$("myContainer .quiz_div").on("resize", function () {
    $("#quiz_idrame").attr("height", your height calc goes here);
});

"on"是一个委托的事件绑定，因此，如果您将类为.quiz_div的项添加/删除到"myContainer"中，即任何包含div的项，它都应该绑定。

相关文章：