我需要一个解决方案自动调节的width和height一个iframe勉强适合其内容。重点是宽度和高度可以iframe在加载后更改。我想我需要一个事件动作来处理 iframe 中包含的主体尺寸的变化。
调整 iframe 的宽度和高度以适应其中的内容
IT技术
javascript
html
iframe
adjustment
2021-01-22 13:52:01
6个回答
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
嵌入的单行解决方案：从最小尺寸开始并增加到内容尺寸。不需要脚本标签。
<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>迄今为止给出的所有解决方案只考虑了一次性调整大小。您提到您希望能够在修改内容后调整 iFrame 的大小。为此，您需要在 iFrame 内部执行一个函数（一旦内容发生更改，您需要触发一个事件来说明内容已更改）。
我被这个问题困扰了一段时间，因为 iFrame 内的代码似乎仅限于 iFrame 内的 DOM（并且无法编辑 iFrame），并且在 iFrame 外执行的代码被 iFrame 外的 DOM 卡住（并且不能t 接收来自 iFrame 内部的事件）。
解决方案来自发现（通过同事的帮助）可以告诉 jQuery 使用什么 DOM。在这种情况下，父窗口的 DOM。
因此，像这样的代码可以满足您的需求（在 iFrame 中运行时）：
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#IDofControlFiringResizeEvent").click(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
});
</script>
如果 iframe 内容来自同一个域，这应该很好用。不过它确实需要 jQuery。
$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});
要动态调整大小，您可以执行以下操作：
<script language="javaScript">
<!--
function autoResize(){
$('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>
然后在 iframe 加载的页面上添加：
<script language="javaScript">
function resize()
{
window.parent.autoResize();
}
$(window).on('resize', resize);
</script>