如何在窗口调整大小时调整 iframe 的大小答案

【问题标题】：How to resize iframe on window resize如何在窗口调整大小时调整 iframe 的大小
【发布时间】：2014-01-01 08:51:33
【问题描述】：

我正在尝试像这样在窗口调整大小时调整 iframe 元素的大小：

唯一的区别是在我的原始代码中，我有 pdf 文档作为 src，但没有苹果网站。

src='link-to-local-pdf'

我希望它在窗口调整大小时使其分别调整 iframe 本身的大小，而不是在窗口上添加滚动，而只在 iframe 上添加滚动。你能帮忙吗？

【问题讨论】：

所以你希望 iframe 尽可能多地占用空间而不添加滚动条？

标签： javascript css iframe resize window

【解决方案1】：

希望我能正确理解您的需求。这是一个页面示例，其中 iframe 使自己始终恰好适合其父窗口。

工作示例：http://jsfiddle.net/My6mj/

javascript：

// set initial size
$( document ).ready(SetIframeSize);

// resize on window resize
$(window).on('resize', SetIframeSize);

function SetIframeSize(){
    $("#external").width($(window).width() - 18); // added margin for scrollbars
    $("#external").height($(window).height() - 35);
}

html:

<div>
    <br/>
    <div id="iframe-wrapper" align="center" style="z-index: 0">
        <iframe id="external" src="http://www.apple.com/">dada</iframe>
    </div>   
</div>

css:

body {
    overflow:hidden;
}

【讨论】：

【解决方案2】：

这应该可以在没有 JavaScript 的情况下工作：

计算 iframe 内容的纵横比（高度/宽度）。
将 iframe 包装在 div 中。
将样式应用于包装器：

.wrap { 位置：相对； padding-top: /* 纵横比，% */ 溢出：隐藏； }
从 iframe 中删除宽度和高度。
将样式应用到 iframe：

iframe { 位置：绝对；顶部：0；左：0；宽度：100%；高度：100% }

【讨论】：

【解决方案3】：

这就是你想要的。

<body>
   <iframe id="the_iframe"></iframe>
</body>

#the_iframe {
    position: absolute;
    left: 50px;
    right: 50px;
    top: 50px;
    bottom: 50px;
}

诀窍是绝对定位，它实际上相对到它的父级。这个 css 为 the_iframe 提供了 50px 的边距，但在整个窗口中。

【讨论】：

你真的试过了吗？因为我只是尝试过，但它与我以前的没有什么不同。它继续向窗口添加滚动。
对不起 - 很高兴对你说，怎么做，很高兴向你解释，它是如何工作的，但我不会调试你的脚本，如果你没有甚至不要试图理解，我向你解释了什么。
好吧，我不想让你调试我的脚本。我添加了指向 jsfiddle 的链接，其中我给出了一个非常基本的示例，并解释了我的目标。我只需要以某种方式使 iframe 自动调整大小。我不需要滚动窗口。
好吧，自己试试看jsfiddle.net/L34am/7。当很明显它不起作用时，你怎么能声称它有效。我不想让你做我的工作
好的，我检查一下，请稍等