iframe的高度

web那些琐碎事

第一章 iframe高度

---

---

前言

将iframe标签引入到html文档中时，iframe的高度是自动的，如果不设置父文档高度的话看起来是
这样的：

虽然也有滚动条，但是我们希望去掉iframe的滚动条，使用父文档的body的滚动条取代之。那就需要使用到javascript，在iframe载入的时候，计算ifreme中文档的的scrollHeight。将其赋值给iframe。
代码如下：

---

代码

<iframe id="mainFrame" name="mainFrame" src="./baseGraphical/rect.html" frameborder="0" scrolling="no"></iframe>

//需要设置两次
function setFrameHeight(){
    let myFrame = document.getElementById("mainFrame");
    if(myFrame){
        myFrame.style.height = myFrame.contentWindow.document.body.scrollHeight+20 + "px";
    }
            
  }
window.onload = function(){
    let myFrame = document.getElementById("mainFrame");
    //iframe加载的时候需要设置一次
    myFrame.onload = function(){
    	myFrame.style.height = myFrame.contentWindow.document.body.scrollHeight+20 + "px";
    }
    //在父页面载入的时候需要设置一次
    setFrameHeight()
  }

---