极客教程如何调整iframe的宽度和高度以适应其中的内容
使用iframe标签时，如果没有指定高度和宽度，标签内部的内容会以默认大小显示。即使指定了高度和宽度，iframe标签的内容也不会与主内容的大小相同。很难将iframe标签内的内容大小设置为与主内容相同。因此，在加载网页上的iframe内容时，需要动态设置内容大小。因为无法在每次执行相同的代码时都设置高度和宽度。
有一种方法可以通过使用一些JavaScript属性来实现动态设置。
在这里使用的属性有：
- contentWindow: 这个属性返回iframe元素使用的Window对象，主要定义了iframe窗口。
- scrollHeight: 这个属性以像素为单位定义了元素的整个高度，元素是iframe。
- scrollWidth: 这个属性以像素为单位定义了元素的整个宽度，元素是iframe。
示例：
<!DOCTYPE html>
<html>
<head>
<h4 style="color:#006400; font-size:24px;">
Adjust width and height of iframe to fit
with content in it using JavaScript</h4>
</head>
<body>
<iframe style="width: 100%;border:3px solid black;
" src="iframe Pge.html" id="Iframe"></iframe>
<!--iframe tag-->
<script>
// Selecting the iframe element
var frame = document.getElementById("Iframe");
// Adjusting the iframe height onload event
frame.onload = function()
// function execute while load the iframe
{
// set the height of the iframe as
// the height of the iframe content
frame.style.height =
frame.contentWindow.document.body.scrollHeight + 'px';
// set the width of the iframe as the
// width of the iframe content
frame.style.width =
frame.contentWindow.document.body.scrollWidth+'px';
}
</script>
</body>
</html>
输出：
在调整iframe的高度和宽度之前，网站的样子如下所示-
在调整iframe的高度和宽度之后，网站的样子如下所示-
用于iframe内部的页面的HTML代码：
<html >
<head>
</head>
<body style="margin:0px;">
<table style="width:100%; border-collapse:collapse;
font:14px Arial,sans-serif;">
<tr>
<td colspan="2" style="padding:10px; background-color:#16641a;">
<h1 style="font-size:24px; color:#fbfffb;">
Welcome to GeeksforGeeks</h1>
</td>
</tr>
<tr style="height:300px;">
<td style="width:20%; padding:20px;
background-color:#ffffff; ">
<ul style="list-style:none; padding:0px;
line-height:24px;">
<li><a href="#" style="color:rgb(70, 192, 59);">
Coding</a></li><br>
<li><a href="#" style="color:rgb(70, 192, 59);;">
WebTechnology</a></li><br>
<li><a href="#" style="color:rgb(70, 192, 59);">
DSA</a></li>
</ul>
</td>
<td style="padding:20px;
background-color:#5c9b37; vertical-align:top;">
<h2>Way to gain knowledge</h2>
<ul style="list-style:none; padding:0px; line-height:24px;">
<li style="color:#ffffff;">Learn</a></li><br>
<li style="color:#ffffff;">Practice</a></li><br>
<li style="color:#ffffff;">Apply to real world</a></li>
</ul>
</td>
</tr>
<tr>
<td colspan="2" style="padding:5px;
background-color:#2b2a2a; text-align:center;">
<p style="color:#ffffff;">copyright ©
geeksforgeeks, Some rights reserved</p>
</td>
</tr>
</table>
</body>
</html>
另一种使iframe的高度和宽度与内容适应的方法是将高度和宽度都设为100%，
<iframe width="100%" height="100%" src="URL" ></iframe>
（这并不适用于所有情况）
示例：
<html>
<head>
<h4 style="color:#006400; font-size:24px;">
Adjust width and height manually to fit iframe content</h4>
</head>
<body>
<div id="frame">
<iframe width="100%" height="100%"
border:3px solid black;" src="iframe Pge.html"
id="iFrame1" ></iframe>
</div>
</body>
</html>
输出：和之前一样
另一种设置iframe的高度和宽度以适应内容的方法是使用CSS的resize属性，这种方法不是动态的，但对于某些时候很有用。
示例：
<html>
<head>
<style>
#frame {
width: 300px;
height: 200px;
resize: both;
}
</style>
<h4 style="color:#006400; font-size:24px;">
Adjust width and height manually to fit
iframe content using CSS</h4>
</head>
<body style="background-color:#ffffff">
<iframe height ="100%" width="100%"
style="border:3px solid black;"
src="iframe Pge.html" id="frame" ></iframe>
</body>
</html>
输出：
