当前位置: 首页 > 面试题库 >

调整iframe的宽度和高度以适合其中的内容

漆雕正奇
2023-03-14
问题内容

我需要一个解决方案 自动调节
widthheight一个iframe勉强适合其内容。关键是iframe加载后可以更改宽度和高度。我想我需要一个事件操作来处理iframe中包含的主体尺寸的变化。


问题答案:
<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>


 类似资料:
  • 问题内容: 我有一个包含2个iFrame的网页。它们都具有固定的宽度和高度。我正在其中加载外部网站。如何调整这些外部网站的宽度以适合iFrame(就像移动浏览器一样通过更改视口来调整宽度)? 问题答案: 您可以做的是为iframe设置特定的宽度和高度(例如,这些宽度和高度可以等于您的窗口尺寸),然后对其应用比例转换。比例值将是您的窗口宽度和要设置为iframe的尺寸之间的比率。 例如

  • 问题内容: 1:如何使导航div向下扩展或使其高度与父div相同? 问题答案: 简单的方法 您可以使用nav to 和的设置和属性来实现此目的。将容器设置为。 现代方式(Flexbox) IE11 +和所有现代浏览器都支持flexbox。

  • 问题内容: 现在,我有一个从外部页面读取的jQuery UI弹出对话框。此页面通过flowplayer从另一个具有视频的外部读取。 我正在使用iframe将视频嵌入到第一个视频中: 100%的宽度似乎没问题,但100%的高度无效。有没有解决的办法? 我在哪里以及如何嵌入代码以及ID内容。请任何人帮忙? 问题答案: 如果要使用100%而不是像素值,则必须使用某种JavaScript来动态调整ifra

  • 问题内容: 我有一个UILabel,一个UIView在情节提要中并排包含其他子视图。UIView应该紧靠UILabel的右边缘(跟踪约束为1),但我还需要UIlabel(左侧的UIlabel)将其宽度设置为等于其内容大小,除非它达到最大宽度。视觉上: |标签文字| | UIViewWithSubviews | 我需要以下约束: 1)标签应明智地调整宽度大小,除非达到最大大小,并且高度也是动态的,这

  • 将父flex容器宽度调整为子flex容器内容宽度时出现问题。 使用Bulma,我有以下HTML结构 但它最终应用于所有子flex容器,如您所见: http://codepen.io/anon/pen/mWqRxW 如何解决这个问题,并使父flex容器适合子flex容器的宽度(在本例中是输入的宽度)?

  • 问题内容: 情况 我正在寻找一种方法来批量调整大小约为1500万个不同文件类型的图像,以适应特定的边框分辨率(在这种情况下,图像不能大于1024 * 1024),而不会扭曲图像,因此保留正确的宽高比。所有文件当前都位于我具有sudo访问权限的Linux服务器上,因此,如果我需要安装任何东西,我很好。 我尝试过的事情 在尝试使用Windows下的某些工具(Adobe Photoshop和其他工具)后