内容更新后更改iframe的高度

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

嗯，重点是，我想调整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是在同一个域:)

谢谢！

来源

2014-09-04 zel

可能重复（http://stackoverflow.com/questions/看看9162933/make-iframe-height-dynamic-based-content-inside-jquery-javascript） – 2014-09-04 13:16:23

从脚本调用'iframeLoaded（）'，脚本正在改变'.quiz-div'的内容？ @JamesHill看起来像OP已经阅读过这篇文章，在接受的答案中的代码与这里的问题相同。 – Teemu 2014-09-04 19:24:01

您可以使用基于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

的[使基于内 - JQUERY/JavaScript内容iframe高度动态]

来源

2014-09-04 13:23:25 Germain

在jQuery中，你可以使用

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

“关于”被委派事件绑定，因此，如果你与类的.quiz_div添加/删除项目的“myContainer中”，即任何包含的div ，它应该绑定。

来源

2014-09-04 13:18:33

'的jQuery（函数（$）{ \t $（文件）。就绪（函数（）{ \t \t $（ “身体.quiz_div”）。在（ “调整”，函数（）{ $（“＃quiz_iframe “）.attr（” 高度”，+50）; }）; \t}）;' 做过类似的内页中#quiz_iframe加载，但不工作可能是我做了什么错了？:) – zel 2014-09-04 16:24:51

创建一个jsfiddle，我会看看！ – 2014-09-06 08:04:50

内容更新后更改iframe的高度

回答

相关问题