我在iframe中加载一个aspx网页 . Iframe中的内容可以比iframe的高度更高 . iframe不应该有滚动条 .
我在iframe中有一个包装器 div
标签,它基本上都是内容 . 我写了一些jQuery来调整大小:
$("#TB_window", window.parent.document).height($("body").height() + 50);
其中 TB_window
是包含 Iframe
的div .
body
- iframe中aspx的body标记 .
此脚本附加到iframe内容 . 我从父页面获取 TB_window
元素 . 虽然这在Chrome上运行良好,但TB_window在Firefox中崩溃 . 我真的很困惑/失去了为什么会发生这种情况 .
16 回答
你可以在这里参考相关的问题 - How to make width and height of iframe same as its parent div?
设置动态高度 -
我们需要与跨域iFrame和父进行通信
然后我们可以将iframe的滚动高度/内容高度发送到父窗口
和代码 - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
要添加到似乎在底部切断的窗口块,特别是当您没有滚动我使用时:
对Aristos的回答略有改善......
然后在iframe中声明如下:
有两个小的改进:
您不需要通过document.getElementById获取元素 - 因为您已经在onload回调中使用了它 .
如果're going to reassign it in the very next statement. Doing so actually incurs an overhead as you'处理DOM元素,则无需设置
iframe.height = ""
.当您需要没有jquery的解决方案时,这个很有用 . 在这种情况下,您应该尝试添加容器并以百分比为其设置填充
HTML示例代码:
CSS示例代码:
对BlueFish的回答略有改善......
这需要考虑窗口屏幕(浏览器,手机)的高度,这对于响应式设计和具有巨大高度的iframe是有益的 . 填充表示在iframe进入整个屏幕的情况下,iframe上方和下方的填充 .
以防这有助于任何人 . 我试着让它发挥作用,然后我注意到iframe有一个高度为100%的类条目 . 当我删除它时,一切都按预期工作 . 所以,请检查任何css冲突 .
您可以使用以下命令检索
IFRAME
内容的高度:contentWindow.document.body.scrollHeight
加载
IFRAME
后,您可以通过执行以下操作更改高度:然后,在
IFRAME
标记上,您可以像这样连接处理程序:我刚才有一种情况,我还需要在提交表单提交后从
IFRAME
本身调用iframeLoaded
. 您可以通过在IFRAME
的内容脚本中执行以下操作来实现此目的:我找到的最简单的方法是使用javscript / jquery,而不是使用javscript / jquery:
这里1vh =浏览器窗口高度的1% . 因此,要设定的高度的理论值是100vh,但实际上98vh是神奇的 .
您还可以在resizeIframe中添加重复的requestAnimationFrame(例如来自@ BlueFish的答案),在浏览器绘制布局之前总是会调用它,并且当内容更改其高度时,您可以更新iframe的高度 . 例如输入表格,延迟加载内容等
你的回调应该足够快,不会对你的整体表现产生太大影响
简单的解决方案是测量内容区域的宽度和高度,然后使用这些测量值来计算底部填充百分比 .
在这种情况下,测量值为1680 x 720 px,因此底部的填充为720/1680 = 0.43 * 100,达到43% .
您可以通过四种不同的属性来获取iFrame中内容的高度 .
可悲的是,他们都可以给出不同的答案,这些在浏览器之间是不一致的 . 如果将body margin设置为0,那么
document.body.offsetHeight
会给出最佳答案 . 要获得正确的值,请尝试此功能;这是从 iframe-resizer 库中获取的,该库也会在内容更改或调整浏览器大小时保持iFrame的正确大小 .和/或
请参阅Stack Overflow问题How to get the height of a body element .
试试这个在jQuery中找到body的高度:
如果Firebug,它没有值 . 也许这就是问题所在 .
将此添加到iframe,这对我有用:
如果您使用jQuery尝试此代码:
我发现特洛伊的答案没有用 . 这是为ajax重做的代码:
我发现接受的答案是不够的,因为X-FRAME-OPTIONS:Allow-From isn't supported in safari or chrome . 采用了不同的方法,发现于来自Disqus的Ben Vinegar给出的presentation . 想法是向父窗口添加一个事件监听器,然后在iframe内部使用window.postMessage发送一个事件给父母告诉它做某事(调整iframe的大小) .
所以在父文档中,添加一个事件监听器:
在iframe中,编写一个函数来发布消息:
最后,在iframe内部,向body标签添加onLoad以触发resize函数: