我有一个 iframe 与网页位于同一域中。
我有一个标题，我想保持相同的高度(我不知道它是什么，假设是 80px)，而正文包含 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>
最佳答案
在window上绑定(bind)resize事件，并设置iframe的高度:
$('#content').css('height', ($(window).height() - 80) + 'px');
关于javascript - 如何使用 iframe 编写可调整大小的页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10026658/