/**
* Resizes the given iFrame width so it fits its content
* @param e The iframe to resize
*/
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}
27 回答
我正在使用此代码在页面上加载时自动调整所有iframe(使用类autoHeight)的高度 . 经过测试,适用于IE,FF,Chrome,Safari和Opera .
跨浏览器jQuery plug-in .
Cross-bowser,跨域 library ,使用
mutationObserver
保持iFrame大小与内容和postMessage
在iFrame和主页之间进行通信 . 使用或不使用jQuery .到目前为止给出的所有解决方案仅考虑一次性调整大小 . 您提到您希望能够在修改内容后调整iFrame的大小 . 为了做到这一点,你需要在iFrame中执行一个函数(一旦内容被更改,你需要触发一个事件来说明内容已经改变) .
我被困了一段时间,因为iFrame中的代码似乎仅限于iFrame中的DOM(并且无法编辑iFrame),并且在iFrame外部执行的代码被困在iFrame外部的DOM(并且没有'拿起来自iFrame内部的活动) .
解决方案来自于发现(通过同事的帮助)可以告诉jQuery使用什么DOM . 在这种情况下,父窗口的DOM .
因此,像这样的代码可以满足您的需求(在iFrame中运行时):
如果iframe内容来自同一个域,那么这应该很有用 . 它确实需要jQuery .
要让它动态调整大小,您可以这样做:
然后在iframe加载的页面上添加:
用于嵌入的单层解决方案:以最小尺寸开始并增加到内容大小 . 不需要脚本标签 .
如果您不想使用jQuery,这是一个跨浏览器的解决方案:
在我尝试了地球上的一切之后,这对我来说真的很有用 .
的index.html
以下是几种方法:
和另一个替代
用上面的两个替代方案隐藏滚动
很高兴第二个代码
为了隐藏iFrame的滚动条,父级被设置为“overflow:hidden”以隐藏滚动条,并且iFrame的宽度和高度达到150%,这会强制页面外的滚动条,因为身体没有有滚动条可能不会指望iframe超出页面的界限 . 这会全屏隐藏iFrame的滚动条!
来源:设置iframe auto height
这是一个坚实的证明解决方案
HTML
我略微修改了Garnaph上面的伟大解决方案 . 似乎他的解决方案根据事件之前的大小修改了iframe大小 . 对于我的情况(通过iframe提交电子邮件)我需要在提交后立即更改iframe高度 . 例如,在提交后显示验证错误或“谢谢”消息 .
我刚刚删除了嵌套的click()函数并将其放入我的iframe html中:
为我工作,但不确定跨浏览器功能 .
所有人都无法使用上述方法 .
JavaScript的:
HTML:
环境:IE 10,Windows 7 x64
如果有人到达这里:当我从iframe中删除div时我遇到了解决方案的问题 - iframe没有缩短 .
有一个Jquery插件可以完成这项工作:
http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
经过一些实验,我想出了另一个解决方案 . 我最初尝试将此问题标记为“最佳答案”的代码,但它无效 . 我的猜测是因为我当时的程序中的iframe是动态生成的 . 这是我使用的代码(它对我有用):
正在加载的iframe中的Javascript:
这是iframe的html:
以下是我的iframe中的所有代码:
我已经完成了铬测试和一点点测试firefox(在windows xp中) . 我还有更多测试要做,所以请告诉我这对你有什么用 .
我发现这个缩放器工作得更好:
请注意,样式对象已删除 .
在jQuery中,这对我来说是最好的选择,真的对我有帮助!!我等着帮助你!
IFRAME
jQuery的
如果您可以控制IFRAME内容和父窗口,那么您需要iFrame Resizer .
此库可以自动调整相同和跨域iFrame的高度和宽度,以适应其包含的内容 . 它提供了一系列功能来解决使用iFrame的最常见问题,其中包括:
将iFrame的高度和宽度调整为内容大小 .
适用于多个嵌套的iFrame .
跨域iFrame的域身份验证 .
提供一系列页面大小计算方法以支持复杂的CSS布局 .
检测可能导致页面使用MutationObserver调整大小的DOM更改 .
检测可能导致页面调整大小的事件(窗口调整大小,CSS动画和转换,方向更改和鼠标事件) .
通过postMessage在iFrame和主页之间简化消息传递 .
修复了iFrame中的页面链接,并支持iFrame和父页面之间的链接 .
提供自定义大小调整和滚动方法 .
将父位置和视口大小暴露给iFrame .
与ViewerJS一起使用以支持PDF和ODF文档 .
对IE8的后备支持 .
有可能制作一个像鬼一样的IFrame .
见http://codecopy.wordpress.com/2013/02/22/ghost-iframe-crossdomain-iframe-resize/
基本上你使用https://developer.mozilla.org/en-US/docs/DOM/window.postMessage中描述的事件系统
parent.postMessage(..)
这适用于所有现代浏览器!
我就是这样做的(在FF / Chrome中测试):
我知道帖子很旧,但我相信这是另一种方法 . 我刚刚在我的代码上实现了 . 在页面加载和页面调整大小时都可以正常工作:
Javascript to be placed in header:
Here goes iframe html code:
Css stylesheet
对于angularjs指令属性:
请注意百分比,我插入它以便您可以计算通常为iframe,文本,广告等进行的缩放,如果没有实现缩放,则只需输入0
如果内容只是一个非常简单的html,最简单的方法是使用javascript删除iframe
HTML:
JavaScript的:
这就是我在上传时或在事情发生变化时的方式 .
上下文
我必须在网络扩展的环境中自己做这件事 . 此Web扩展为每个页面注入了一些UI,并且此UI位于
iframe
内 .iframe
内的内容是动态的,所以我必须重新调整iframe
本身的宽度和高度 .我使用 React 但这个概念适用于每个库 .
我的解决方案(假设您控制页面和iframe)
在
iframe
里面,我更改了body
样式,以确保尺寸非常大 . 这将允许内部元素使用所有必要的空间布局 . 使width
和height
100%对我不起作用(我猜因为iframe有一个默认的width = 300px
和height = 150px
)然后我在div中注入所有iframe UI并给它一些样式
在我的应用程序内部渲染
#ui-root
(在React中我在componentDidMount
内执行此操作)我计算此div的尺寸,并使用window.postMessage
将它们同步到父页面:在父框架中我做这样的事情:
简单:
这仅使用内联CSS: