<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS static and dynamic method to get iframe height</title>
<link rel="stylesheet" href="base.css" />
</head>
<body>
<h3>iframe demo</h3>
<!--default-->
<iframe src="demo.html"></iframe>
<!-- Get height statically-->
<iframe src="demo.html" scrolling="no" frameborder="0" id="iframeHei" width="100%"></iframe>
<script type="text/javascript">
function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}
window.onload = function () {
iframeAutoFit(document.getElementById('iframeHei'));
};
</script>
<!-- Get the height dynamically, every 200 milliseconds -->
<iframe src="demo.html" frameborder="0" scrolling="no" id="iframeHei2" width="100%" onload="this.height=100"></iframe>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("iframeHei2");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max (bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
</body>
</html>
Effect picture:
