Iframe自适应高度,Iframe高度问题解决
================================
©Copyright 蕃薯耀 2021-03-11
http://fanshuyao.iteye.com/
一、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-11
http://fanshuyao.iteye.com/
相关推荐
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
iframe自适应高度和宽度
iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe...
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe自适应高度(兼容多种浏览器) 亲测可以
纯JS实现的iframe自适应高度。兼容主流浏览器。
多层嵌套iframe 自适应高度的解决方法
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行,不用做任何别的操作完全自动化。
iframe自适应高度的简单解决办法,word文档中有详细的解释,赶快下载吧!
iframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txt
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那几个,而且基本都测试了一遍,所说的兼容根本不是那么回事,要不IE不正常,要不其他浏览器显示不正常,最后无奈,综合网上的方法...
javascript iframe 自适应高度js demo
iframe自适应高度
iframe自适应高度 .doc
介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。
iframe自适应高度(DOM动态操作)
iframe自适应高度:根据屏幕的高度,自动增减。包括适应浏览器高度的改变。
iframe根据引用的页面内容自适应高度和宽度,直接查看例子,简单易操作