IFrame跨域高度自适应实现代码


Posted in Javascript onAugust 16, 2012
var iframeids = ['memberIndexIframe','inquiryCenterIframe','everychinaBbsIframe']; 
var iframehide = "yes"; 
function dynIframeSize(){ 
var dyniframe = []; 
for(var i=0;i<iframeids.length;i++){ 
if(!document.getElementById) return false; 
dyniframe[i] = document.getElementById(iframeids[i]); 
if(dyniframe[i] && !window.opera){ 
dyniframe[i].style.display = "block"; 
if(dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight){ 
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; 
}else if(dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight){ 
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight; 
} 
} 
if((document.all || document.getElement) && iframeids == "no") { 
var tempobj = document.all?document.all[iframeids[i]] : document.getElementById(iframeids[i]); 
tempobj.style.display = "block"; 
} 
} 
} 
if (window.addEventListener) 
window.addEventListener("load", dynIframeSize, false) 
else if (window.attachEvent) 
window.attachEvent("onload", dynIframeSize) 
else { 
window.onload = dynIframeSize; 
}

对于上面的代码直接保存一个文件iframe.js,然后引用即可

注意:这段代码对于跨域的iframe引用不太适用,需要特别定义其iframe高度

下面这个代码是跨域的iframe高度

项目网站中需要嵌入合作网站的页面,这就需要页面的自适应高度变化,并且是跨域的。在网上看了许多资料,加上自己的实践,终于实现了跨域的IFrame自适应高度。如下:

首先,我的页面a.html需要引入对方的b.html,在这里运用iframe方式实现页面的套用
a.html页面的主要代码如下:

<BODY> 
<iframe width="100%" id="a_iframe" name="a_iframe" src="http://对方域名/b.html" 
frameborder="no" border="0px" scrolling="no" allowtransparency="yes" ></iframe> 
</BODY>

a.html页面只是用来引入对方页面的一个简单页面 这就不多做介绍。
然后,最好在a.html同一级目录下,创建一个agent.html页面,该页面用来得到对方通过js传递过来的参数,
根据高度参数来调整a.html中的a_iframe的高度,主要代码如下:
Js代码
<script type="text/javascript"> 
//得到a.html中的a_iframe 
var a_iframe = parent.parent.document.getElementById("a_iframe"); 
//<SPAN>location.hash用来获取页面的标签值</SPAN> 
,这个值通过b.html中的js函数改变。包括height属性 
var hash_url = window.location.hash; 
//得到b.html传递过来的height属性 
var hash_height = hash_url.split("#")[1]+"px"; 
//调整a_iframe的height,达到自适应 
a_iframe.height = hash_height; 
</script>

最后,对方的页面(b.html),让对方在b.html中加入以下javascript代码
<iframe id="b_iframe" width="100%" src="http://我的域名/../agent.html" style="display:none"> 
</iframe> 
<script type="text/javascript"> 
var b_height = Math.max(document.body.scrollHeight,document.body.clientHeight); 
var b_iframe = document.getElementById("b_iframe"); 
b_iframe.src = b_frame.src+"#"+b_height; 
</script>

通过 Math.max(clientHeight,scrollHeight)比较网页可见区域高,网页正文全文高这两者得到其中的较大的值后,
iframe将这个height通过src传递到我的agent.html,这样a.html中的Iframe就能自适应对方的b.html高度了。这里在IE下测试的没问题,其它浏览器没测试。
在实现这个功能的过程中,在网上发现了一段很有用的获取页面高度的js,在这里也记录、引用下:
<script> 
var strInfo=" " ; 
strInfo+=" \r\n网页可见区域宽:" +document.body.clientWidth; 
strInfo+=" \r\n网页可见区域高:" +document.body.clientHeight; 
strInfo+=" \r\n网页可见区域宽:" +document.body.offsetWidth+" (包括边线的宽)" ; 
strInfo+=" \r\n网页可见区域高:" +document.body.offsetHeight+" (包括边线的宽)" ; 
strInfo+=" \r\n网页正文全文宽:" +document.body.scrollWidth; 
strInfo+=" \r\n网页正文全文高:" +document.body.scrollHeight; 
strInfo+=" \r\n网页被卷去的高:" +document.body.scrollTop; 
strInfo+=" \r\n网页被卷去的左:" +document.body.scrollLeft; 
strInfo+=" \r\n网页正文部分上:" +window.screenTop; 
strInfo+=" \r\n网页正文部分左:" +window.screenLeft; 
strInfo+=" \r\n屏幕分辨率的高:" +window.screen.height; 
strInfo+=" \r\n屏幕分辨率的宽:" +window.screen.width; 
strInfo+=" \r\n屏幕可用工作区高度:" +window.screen.availHeight; 
strInfo+=" \r\n屏幕可用工作区宽度:" +window.screen.availWidth; 
window.confirm(strInfo); 
</script>
Javascript 相关文章推荐
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
Vue-Router的使用方法
Sep 05 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
JSONP 跨域共享信息
Aug 16 #Javascript
js自执行函数的几种不同写法的比较
Aug 16 #Javascript
js三种排序算法分享
Aug 16 #Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 #Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 #Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 #Javascript
You might like
PHP EOT定界符的使用详解
2008/09/30 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
php把session写入数据库示例
2014/02/26 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python简单区块链模拟详解
2019/07/03 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
巴西补充剂和维生素购物网站:Natue
2019/06/17 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
华为C++笔试题
2014/08/05 面试题
七年级英语教学反思
2014/01/15 职场文书
三年级数学教学反思
2014/01/31 职场文书
运动会通讯稿200字
2014/02/16 职场文书
农行心得体会
2014/09/02 职场文书
学雷锋倡议书
2015/01/19 职场文书
趣味运动会赞词
2015/07/22 职场文书
婚宴新娘致辞
2015/07/28 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers