前言
- frame元素已经不建议使用。目前都是用iframe。
- iframe的优点是逻辑隔离,母页面和子页面互相不干扰。
1. 使用
<iframe name="data-iframe" id="data-iframe" width="100%" height="100%" frameborder="0"></iframe>
- 链接在这个iframe打开
- 如果通过target找不到对应name的iframe,就在新窗户打开。
<li><a href="pssvez.html" target="data-iframe">电源侧电压为0的终端清单</a></li>
2.iframe高度,宽度自动修改
- 因为iframe自己有自己的滚动条,所以如果不想出现2个滚动条,iframe的宽度和高度不能超过母页面的视窗,否则,母页面就会出现滚动条。
- 如下例子可以实现修改iframe的宽度和高度。注意其中的减法,要根据自己的页面需要自行修改。根据自己的iframe在母页面的时候,和其他元素的大小之和有没有超过浏览器窗口的大小。
<iframe class="p-2 bd-highlight flex-grow-1" src="pssvez.html" id="iframeHome" onload="iFrameHeight()"></iframe>
function iFrameHeight() {
var ifm = document.getElementById("iframeHome");
ifm.height=document.documentElement.clientHeight-50;
ifm.width=document.documentElement.clientWidth-280;
}
网友评论