//ifarme的呈现方式 function InitIframeHtml(url) { $('#workarea').html("<iframe src=" + url + " frameborder='0' scrolling='no' width='800' id='adminFrame'></iframe>"); }
//注意高度不要设置。
function iframeAutoHeight() { if (window.addEventListener) window.addEventListener("load", iframeAutoFit, false); else if (window.attachEvent) window.attachEvent("onload", iframeAutoFit); else window.onload = iframeAutoFit; } document.iframeAutoFit = iframeAutoFit; function iframeAutoFit() { if (window != parent) { var a = parent.document.getElementsByTagName("IFRAME"); for (var i = 0; i < a.length; i++) { if (a[i].contentWindow == window) { a[i].style.height = '50px'; var h1 = 0, h2 = 0; if (document.documentElement && document.documentElement.scrollHeight) h1 = document.documentElement.scrollHeight; if (document.body) h2 = document.body.scrollHeight; var h = Math.max(h1, h2); if (document.all) h += 4; if (window.opera) h += 1; a[i].style.height = h + "px"; } } } }
页面初始化的时候:
$().ready(function() {iframeAutoHeight(); });
动态加载数据的时候:
iframeAutoFit();
js 实现iframe 自适应高度 超级简单的方法:
parent.document.getElementById("adminFrame").style.height = document.body.scrollHeight + "px";
jquery 实现iframe 自适应高度 超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。
下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。注意别放错地方了哦。 iframe代码,注意要写ID
jquery代码1: //注意:下面的代码是放在test.html调用 $(window.parent.document).find("#main").load(function(){ var main = $(window.parent.document).find("#main"); var thisheight = $(document).height()+30; main.height(thisheight); });
jquery代码2: //注意:下面的代码是放在和iframe同一个页面调用 $("#main").load(function(){ var mainheight = $(this).contents().find("body").height()+30; $(this).height(mainheight); });