2022-12-15_iframe

前言

• frame元素已经不建议使用。目前都是用iframe。
• iframe的优点是逻辑隔离，母页面和子页面互相不干扰。

1. 使用

• 高度，宽度自适应，无边框
• 注意name属性

<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;
}