Iframe自适应高度 Iframe高度问题解决

Iframe自适应高度，Iframe高度问题解决

================================

©Copyright 蕃薯耀-03-10

/fanshuyao/

一、Iframe自适应高度方法

/*** 父级页面获取子级页面的高度 给元素设置高度* 在onload事件之后才生效，即第一次加载才生效，后面高度变化不再生效* @param id* @returns*/function setIframeHeightAfterLoad(id){try{var iframe = document.getElementById(id);if(iframe.attachEvent){iframe.attachEvent("onload", function(){//console.log("iframe.attachEvent");iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;});return;}else{iframe.onload = function(){iframe.height = iframe.contentDocument.body.scrollHeight;//console.log("iframe.onload");};return; }}catch(e){throw new Error('setIframeHeightAfterLoad Error');}};/*** 父级页面获取子级页面的高度 给元素设置高度* 配合定时使用：window.setInterval("thisIframeHeightAuto()", 200);* @param id* @returns*/function setIframeHeight(id){try{var iframe = document.getElementById(id);if(iframe.attachEvent){iframe.height = iframe.contentWindow.document.documentElement.scrollHeight;return;}else{iframe.height = iframe.contentDocument.body.scrollHeight;return; }}catch(e){throw new Error('setIframeHeight Error');}};/*** 子级页面给父级页面元素设置高度* @param id* @returns*/function setParentIframeHeight(id){try{var parentIframe = parent.document.getElementById(id);if(window.attachEvent){window.attachEvent("onload", function(){parentIframe.height = document.documentElement.scrollHeight;});return;}else{window.onload = function(){parentIframe.height = document.body.scrollHeight;};return; }}catch(e){throw new Error('setParentIframeHeight Error');}};

二、详细使用

<iframe id="socialHousingIframe" border="0" frameborder="0" scrolling="no" width="100%" height="100%" style="padding: 0; margin: 0;" src="../../static/analysis/socialHousing.html">

</iframe>

function thisIframeHeightAuto(){setIframeHeight("socialHousingIframe");};

$(function(){

//定时处理window.setInterval("thisIframeHeightAuto()", 200);

//首次加载使用setIframeHeightAfterLoad，可以省略，由定时任务处理setIframeHeightAfterLoad("socialHousingIframe");});

(如果文章对您有所帮助，欢迎捐赠，^_^)

================================

©Copyright 蕃薯耀-03-10

/fanshuyao/