父页面添加iframe引入另一个页面是一张数据表格,父页面如何自适应iframe高度与表格匹配
时间: 2023-08-11 22:44:10 浏览: 116
可以使用JavaScript来动态调整iframe的高度,使其与内嵌页面的高度匹配。以下是一种常见的实现方式:
1. 在父页面中定义一个函数,用于设置iframe的高度:
```
function setIframeHeight(id) {
var iframe = document.getElementById(id);
var height = iframe.contentWindow.document.body.scrollHeight;
iframe.style.height = height + 'px';
}
```
2. 在内嵌页面中,添加如下代码片段:
```
<script>
window.onload = function() {
parent.setIframeHeight('iframeId');
}
</script>
```
其中,`iframeId`是父页面中iframe元素的id,上述代码会在内嵌页面加载完成后调用父页面的`setIframeHeight`函数,设置iframe的高度。
3. 最后,在父页面中,将iframe的高度初始化为0,并监听内嵌页面的加载事件,调用`setIframeHeight`函数:
```
<iframe id="iframeId" src="子页面地址" frameborder="0" scrolling="no" style="width:100%; height:0;"></iframe>
<script>
var iframe = document.getElementById('iframeId');
iframe.onload = function() {
setIframeHeight('iframeId');
};
</script>
```
这样,当内嵌页面加载完成后,父页面会动态调整iframe的高度,使其与内嵌页面的高度匹配。
阅读全文