Iframe自适应高度,Iframe高度问题解决
================================
©Copyright 蕃薯耀 2021-03-10
https://www.cnblogs.com/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 蕃薯耀 2021-03-10
https://www.cnblogs.com/fanshuyao/
今天的文章css高度根据内容自适应_js解决自适应分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/59129.html