Javascript 如何使用iframe编写可调整大小的页面？_Javascript_Jquery_Html_Iframe_Resize

Javascript 如何使用iframe编写可调整大小的页面？

javascript jquery html iframe

Javascript 如何使用iframe编写可调整大小的页面？,javascript,jquery,html,iframe,resize,Javascript,Jquery,Html,Iframe,Resize,我在与网页相同的域中有一个iframe 我有一个标题，我想保持相同的高度（我不知道它是什么，比如说80px），而主体包含iframe，当浏览器调整大小时，iframe会调整大小： ---------- -------------- | header | | header | ---------- -------------- | iframe | -> | | | | |

我在与网页相同的域中有一个iframe

我有一个标题，我想保持相同的高度（我不知道它是什么，比如说80px），而主体包含iframe，当浏览器调整大小时，iframe会调整大小：

----------        --------------
| header |        |   header   |
----------        --------------
| iframe |   ->   |            |
|        |        |            |
|        |        |    ....    |
----------        |            |
                  |            |
                  --------------

我正在使用jQuery，并在

iframe

div上尝试了

height（）

和

css（）

，但这些都不会改变

iframe

的尺寸。

iframe

保持相同的、较小的默认尺寸

如果我在

iframe

CSS中手动指定百分比，那么调整大小是可行的，但是由于这些是百分比，因此

iframe

超出了直接页面的边框，并且在足够高的百分比值将边框推离屏幕后被切断

我需要一些方法来帮助

iframe

按像素计算自己的边框，使其保持在页面边框内。我可以获取窗口的宽度和高度，但正如前面提到的，从这些值中应用

css（）

和

height（）

并没有更新

iframe

的大小

同样：我在与父页面相同的域中使用

iframe

我如何正确地对标题和iframe的大小调整进行编码，以便

resize（）

操作（或调整浏览器窗口大小）实际工作

我尝试过的代码如下所示：

<html>
<head>
... // load jquery, etc.
<script>
function resize() { 
    var w = $('#body').width(); 
    var h = $('#body').height();

    $('#header').width(w + "px"); // works
    $('#header').height("80px"); // works

    $('#my_iframe').css("width", w + "px"); // doesn't work
    $('#my_iframe').width(w + "px"); // doesn't work, either

    $('#my_iframe').css("height", (h-80) + "px"); // doesn't work
    $('#my_iframe').height((h-80) + "px"); // doesn't work, either
}
</script>
</head>

<body onresize="resize()" id="body">
<div id="header"><div>
<iframe id="my_iframe" .../>
</body>
</html>


... // 加载jquery等。
函数resize（）{
var w=$（'#body'）.width（）；
var h=$（'#body'）.height（）；
$（“#标题”）.width（w+“px”）；//有效
$（'#标题'）。高度（“80px”）；//有效
$（'my'iframe'）.css（“width”，w+“px”）；//不起作用
$（“#我的iframe”）.width（w+“px”）；//也不起作用
$（'#my_iframe'）.css（“height”，（h-80）+“px”）；//不起作用
$（“#我的iframe”）.height（（h-80）+“px”）；//也不起作用
}

绑定

窗口上的resize
事件，并设置iframe
的高度：
$('#content').css('height', ($(window).height() - 80) + 'px');

演示：
为了确认，您是否在iframe标记本身上设置了尺寸？当你说“在iframe div上”时我很困惑。我的方法是监听窗口大小调整，然后在事件回调中，将iframe标记上的尺寸设置为主体宽度和主体高度减去页眉高度。您是否试图让页面填充的iframe
小于顶部的80px
部分？或者，iframe
是否能够调整其父窗口的大小？