基于jQuery/Javascript内部内容使iframe高度动态我正在加载一个ASPX网页在一个iframe。IFRAME中的内容可以比IFRAME的高度更高。iframe不应该有滚动条。我有个包装纸div标签内的iframe，这基本上是所有的内容。我编写了一些jQuery来实现大小调整：$("#TB_window", window.parent.document).height($("body").height() + 50);哪里TB_window是一个div，在这个div中，Iframe都被控制住了。body-IFRAME中ASPX的身体标记。此脚本附加到iframe内容。我要去拿TB_window元素来自父页。虽然这在Chrome上很好，但是tb_窗口在Firefox中会崩溃。我真搞不懂为什么会这样。
3 回答
慕标琳琳
TA贡献1830条经验 获得超9个赞
IFRAMEcontentWindow.document.body.scrollHeight
IFRAME
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}</script>IFRAME
<iframe id="idIframe" onload="iframeLoaded()" ...
iframeLoadedIFRAMEIFRAME
parent.iframeLoaded();
一只名叫tom的猫
TA贡献1906条经验 获得超3个赞
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}</script>然后在IFRAME中声明如下：
<iframe onload="resizeIframe(this)" ...
有两个小改进：
- 您不需要通过document.getElementById获取元素，因为在onload回调中已经有了它。
- 没有必要设置
如果你要在下一个声明中重新分配它。这样做实际上会在处理DOM元素时产生开销。iframe.height = ""
有只小跳蛙
TA贡献1824条经验 获得超8个赞
我发现接受的答案是不够的，因为X帧选项：允许-从在Safari或Chrome中不支持..使用不同的方法，在展示来自Disqus的本醋。这样做的目的是向父窗口添加一个事件侦听器，然后在iframe内部使用window.postMessage将一个事件发送给父窗口，告诉它做一些事情(调整iframe的大小)。
因此，在父文档中，添加一个事件侦听器：
window.addEventListener('message', function(e) {
var $iframe = jQuery("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
$iframe.height(data);
break;
}}, false);在iframe内部，编写一个函数来发布消息：
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*"); }最后，在iframe内部，向body标记添加一个onload，以触发调整大小函数：
<body onLoad="resize();">
添加回答
举报
0/150
提交
取消