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 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
解决vue中的无限循环问题
Jul 27 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
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
python实现文件路径和url相互转换的方法
2015/07/06 Python
python 读取二进制 显示图片案例
2020/04/24 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python调用C语言程序方法解析
2020/07/07 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
省三好学生申请材料
2014/01/22 职场文书
明确岗位职责
2015/02/14 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
会计试用期自我评价
2015/03/10 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
道歉短信大全
2015/05/12 职场文书
党支部鉴定意见
2015/06/02 职场文书
焦裕禄观后感
2015/06/03 职场文书
股东协议书范本2016
2016/03/21 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技