方案1、
HTML
<!--内容部分--> <div class="con"> <iframe id="mainFrame" name="mainFrame" sr c="main.html" style="width:100%;" frameborder="0" scrolling="no" onLoad="this.height=100" ></iframe> </div>
写在同一页面上的JS
$(function () { //时间控制每隔200毫秒检查当前页面高度以及滚动高度,测试多遍,cpu占用极少,不明显影响程序运行速度 window.setInterval("reinitIframe()", 200); }) //iframe自适应高度,解决了动态更换页面高度无法自适应问题 function reinitIframe() { var iframe = document.getElementById("mainFrame"); try { //bHeight 和 dHeight 如果相等,用其一等于iframe.height 即可 // var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; // var height = Math.max(bHeight, dHeight); console.log(dHeight) iframe.height = dHeight; } catch (ex) { } }
方案2、
html代码
<iframe id="iframe_id" name="iframe_id" src="加载的url" style="width: 100%;" frameborder="0" scrolling="no" onload="setHeight()"></iframe>
js代码
<script type="text/javascript"> function setHeight(){ var iframe = document.getElementById("iframe_id"); try{ var aHeight = iframe.contentWindow.document.body.scrollHeight; var bHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(aHeight, bHeight);//取最高值; iframe.height = height; }catch (e){} } </script>
总结:亲测可用