javascript - 如何在窗口大小调整时调整 iframe 大小

Question

我正在尝试在窗口调整大小时调整 iframe 元素的大小，如下所示:

Link to jsfiddle

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

src='link-to-local-pdf'

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

Answer 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;
}