我在一个iframe中加载一个aspx网页。Iframe中的内容可以比iframe的高度更高。iframe不应该有滚动条。
我在iframe中有一个包装器div
标签,基本上就是所有的内容。我写了一些jQuery来调整大小:
$("#TB_window", window.parent.document).height($("body").height() + 50);
其中TB_window
是包含Iframe
的div。
body
- iframe中aspx的主体标签。
此脚本附加到iframe内容。我从父页面获取TB_window
元素。虽然这在Chrome上运行得很好,但TB_window在火狐上就崩溃了。我真的很困惑/迷失了为什么会这样。
发布于 2012-02-07 00:05:14
您可以使用:contentWindow.document.body.scrollHeight
检索IFRAME
内容的高度
加载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()" ...
不久前,我遇到过这样一种情况:在中发生表单提交后,我还需要从IFRAME
本身调用iframeLoaded
。您可以通过在IFRAME
的内容脚本中执行以下操作来完成此操作:
parent.iframeLoaded();
发布于 2014-04-12 02:26:47
我发现接受的答案还不够,因为X-FRAME-OPTIONS: Allow-From isn't supported in safari or chrome。取而代之的是一种不同的方法,在Disqus的Ben Vinegar给出的presentation中找到了。这个想法是向父窗口添加一个事件侦听器,然后在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内,将onLoad添加到body标记以触发调整大小函数:
<body onLoad="resize();">
发布于 2015-04-22 22:51:48
将这段代码添加到iframe中,这对我很有效:
onload="this.height=this.contentWindow.document.body.scrollHeight;"
如果你使用jQuery,试试下面的代码:
onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
https://stackoverflow.com/questions/9162933
复制相似问题