Question

我的页面上有一些标签，在该页面的一个标签页面中，我有一个iframe (#quiz_iframe)。此iframe是测验框架，包含在div (.quiz-div)中。点击按钮(.start-quiz)后，系统会加载测验，并在(.quiz-content)内显示新的div (.quiz-div)。在测验内容中，我有20个另外的div (.quiz-question)，它们是分页的，所以在点击下一个按钮prev后，你可以隐藏或显示5个next / prev div。

嗯，关键是，我想调整iframe的高度，然后点击.start-quiz后我就不知道怎么做了。

现在我有一个代码可以正常工作，当第一次加载iframe时（它调整为laoded内容的高度）

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

在jQuery中，你可以使用

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

“on”是一个委托事件绑定，因此如果您将.quiz_div类的项添加/删除到“myContainer”，即包含div的内容，它应该绑定。

Answer 2

您可以使用基于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收听resize事件和postMessage到父页面。但要注意无限循环。

要查看整个代码，您应该查看此Github回购iframe-autoheight-using-postmessage

更新内容后更改iframe高度

2 个答案: