kar*_*rry 193 javascript asp.net iframe jquery
我在iframe中加载一个aspx网页.Iframe中的内容可以比iframe的高度更高.iframe不应该有滚动条.
我div在iframe中有一个包装器标签,基本上就是所有的内容.我写了一些jQuery来调整大小:
$("#TB_window", window.parent.document).height($("body").height() + 50);
包含TB_window它的div在哪里
Iframe.
body - iframe中aspx的body标签.
此脚本附加到iframe内容.我TB_window从父页面获取元素.虽然这在Chrome上运行良好,但TB_window在Firefox中崩溃.我真的很困惑/失去了为什么会发生这种情况.
Ari*_*tos 199
您可以使用以下方法检索内容的高度IFRAME:
contentWindow.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()" ...
我有一个情况在不久前,我还需要调用iframeLoaded从IFRAME后内发生的形式提交自己.您可以通过在IFRAME内容脚本中执行以下操作来实现此目的:
parent.iframeLoaded();
Blu*_*ish 100
对Aristos的回答略有改善......
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
然后在iframe中声明如下:
<iframe onload="resizeIframe(this)" ...
有两个小的改进:
iframe.height = ""如果您要在下一个声明中重新分配它,则无需设置.在处理DOM元素时,这样做实际上会产生开销.小智 53
我发现接受的答案是不够的,因为在safari或chrome中不支持 X-FRAME-OPTIONS:Allow-From .取而代之的是一种不同的方法,发现于来自Disqus的Ben Vinegar 的演示文稿中.想法是向父窗口添加一个事件监听器,然后在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以触发resize函数:
<body onLoad="resize();">
Moh*_*eja 12
将此添加到iframe,这对我有用:
onload="this.height=this.contentWindow.document.body.scrollHeight;"
如果您使用jQuery尝试此代码:
onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
您还可以将重复的 requestAnimationFrame 添加到您的 resizeIframe （例如来自 @BlueFish 的答案），它总是在浏览器绘制布局之前被调用，并且您可以在 iframe 的内容更改其高度时更新 iframe 的高度。例如输入表单、延迟加载内容等。
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
window.requestAnimationFrame(() => resizeIframe(iframe));
}
</script>
<iframe onload="resizeIframe(this)" ...
您的回调应该足够快，不会对您的整体性能产生太大影响
您可以通过四种不同的属性来获取iFrame中内容的高度.
document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight
可悲的是,他们都可以给出不同的答案,这些在浏览器之间是不一致的.如果将体边距设置为0,则document.body.offsetHeight给出最佳答案.要获得正确的值,请尝试此功能; 这是从iframe-resizer库中获取的,该库也会在内容更改或调整浏览器大小时保持iFrame的正确大小.
function getIFrameHeight(){
function getComputedBodyStyle(prop) {
function getPixelValue(value) {
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) {
return parseInt(value,base);
}
var
style = el.style.left,
runtimeStyle = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft;
el.style.left = style;
el.runtimeStyle.left = runtimeStyle;
return value;
}
var
el = document.body,
retVal = 0;
if (document.defaultView && document.defaultView.getComputedStyle) {
retVal = document.defaultView.getComputedStyle(el, null)[prop];
} else {//IE8 & below
retVal = getPixelValue(el.currentStyle[prop]);
}
return parseInt(retVal,10);
}
return document.body.offsetHeight +
getComputedBodyStyle('marginTop') +
getComputedBodyStyle('marginBottom');
}
| 归档时间： |
|
| 查看次数： |
385302 次 |
| 最近记录： |