Javascript 内容更新后更改iframe高度

我的页面上有一些选项卡，在该页面的一个选项卡中有一个iframe

（#quick\u iframe）

。 此iframe是测验框架，它包含在div

（.quick div）

中。点击按钮

（.start quick）

，加载测验，新的div

（.quick content）

出现在

（.quick div）

中。 在测验内容中，我有另外20个div

（.quick question）

，它们是分页的，因此在单击“下一步”、“上一步”按钮后，您可以隐藏或显示5个下一步/上一步div

重点是，我想调整iframe高度以适应该内容，但我不知道如何调整，在单击

之后。开始测验

现在我有了一个代码，当第一次加载iframe时，它可以很好地工作（它将高度调整到老的内容）

}

'

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

谢谢
 在jQuery中，您可以使用

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

“on”是一个委托事件绑定，因此，如果您在“myContainer”中添加/删除.quick\u div类的项目，即任何包含div的项目，它都应该绑定。
您可以使用基于
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。但要注意无限循环

要查看整个代码，您应该查看脚本中调用
iframeload（）
的可能重复的Github repo，它正在更改
.quick div
的内容@JamesHill看起来OP已经读过那篇文章了，接受答案中的代码与这里的问题相同。
jQuery（function（$）{$（document）.ready（function（）{$（“body.quick_div”）。on（“resize”，function（）{$（“#quick_iframe”）.attr（“height”、+50）；}）
在#quick_iframe中加载了类似于此的内部页面，但不起作用。可能我做错了什么？：）创建一个JSFIDLE，我来看看！
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);
});