iframe设置高度自适应
时间: 2023-11-02 22:55:10 浏览: 56
设置iframe的高度自适应有多种方法。其中一种方法是使用JavaScript函数来动态调整iframe的高度。在这个方法中,你可以使用iframe的onload事件和JavaScript函数来设置iframe的高度。具体代码如下:
在iframe标签中添加onload事件和id属性:
```
<iframe width="778" align="center" height="200" id="win" name="win" onload="SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>
```
然后在JavaScript中定义SetWinHeight函数,根据内容的高度来设置iframe的高度:
```
<script>
function SetWinHeight(obj) {
var win = obj;
if (document.getElementById) {
if (win && !window.opera) {
if (win.contentDocument && win.contentDocument.body.offsetHeight) {
win.height = win.contentDocument.body.offsetHeight;
} else if (win.Document && win.Document.body.scrollHeight) {
win.height = win.Document.body.scrollHeight;
}
}
}
}
</script>
```
另一种方法是使用iframe的onload事件和JavaScript函数来设置iframe的高度。这种方法适用于多种浏览器,包括IE6/IE7/IE8/Firefox/Opera/Chrome/Safari。具体代码如下:
在iframe标签中添加onload事件和id属性:
```
<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()"></iframe>
```
然后在JavaScript中定义iFrameHeight函数,根据内容的高度来设置iframe的高度:
```
<script type="text/javascript" language="javascript">
function iFrameHeight() {
var ifm = document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if (ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>
```
这些方法可以帮助你实现iframe的高度自适应。通过在iframe标签中添加相应的事件和函数,根据内容的高度来自动调整iframe的高度,从而实现高度的自适应。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)