我需要一个自动调整iframe的宽度和高度的解决方案,以勉强适应其内容。关键是宽度和高度可以在iframe加载后改变。我想我需要一个事件动作来处理iframe中包含的主体尺寸的变化。
当前回答
以防有人说到这里 当我从iframe中删除div时,我有一个解决方案的问题- iframe没有变短。
有一个Jquery插件,做的工作:
http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
其他回答
<iframe src="..." style="border:none; width:100%; height: 100vh;"></iframe>
这是我怎么做的(在FF/Chrome测试):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>
<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>
在jQuery中,这是我最好的选择,这真的帮助了我!!我等待着帮助你!
iframe
<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>
jQuery
<script>
var valueSize = $( "#iframe" ).offset();
var totalsize = (valueSize.top * 2) + valueSize.left;
$( "#iframe" ).height(totalsize);
</script>
我稍微修改了上面Garnaph的解决方案。似乎他的解决方案根据事件发生前的大小修改了iframe的大小。对于我的情况(通过iframe提交电子邮件),我需要在提交后立即改变iframe的高度。例如,在提交后显示验证错误或“谢谢”消息。
我只是消除了嵌套的click()函数,并将其放入我的iframe html:
<script type="text/javascript">
jQuery(document).ready(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
</script>
对我来说有用,但不确定跨浏览器功能。
如果你可以控制IFRAME内容和父窗口,那么你需要IFRAME调整器。
这个库允许自动调整相同域和跨域iframe的高度和宽度,以适应它们所包含的内容。它提供了一系列功能来解决使用iFrames时最常见的问题,包括:
Height and width resizing of the iFrame to content size. Works with multiple and nested iFrames. Domain authentication for cross domain iFrames. Provides a range of page size calculation methods to support complex CSS layouts. Detects changes to the DOM that can cause the page to resize using MutationObserver. Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events). Simplified messaging between iFrame and host page via postMessage. Fixes in page links in iFrame and supports links between the iFrame and parent page. Provides custom sizing and scrolling methods. Exposes parent position and viewport size to the iFrame. Works with ViewerJS to support PDF and ODF documents. Fallback support down to IE8.
推荐文章
- 如何在vue-cli项目中更改端口号
- Angular 2模板中的标签是什么意思?
- JavaScript .includes()方法的多个条件
- 如何设置身体高度溢出滚动
- 窗口。亲近与自我。close不关闭Chrome中的窗口
- 同步和异步编程(在node.js中)的区别是什么?
- 在d3.js中调整窗口大小时调整svg的大小
- 如何将两个字符串相加,就好像它们是数字一样?
- 绑定多个事件到一个监听器(没有JQuery)?
- 在JavaScript中将JSON字符串解析为特定对象原型
- 将字符串“true”/“false”转换为布尔值
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?