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()
}