代码如下:
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>

ifame 跨域高度自适应的更多相关文章

  1. 完美实现跨域Iframe高度自适应【Iframe跨域高度自适应解决方案】

    Iframe的强大功能偶就不多说了,它不但被开发人员经常运用,而且黑客们也常常使用它,总之用过的人知道它的强大之处,但是Iframe有个致命的“BUG”就是iframe的高度无法自动适应,这一点让很多 ...

  2. 解决Iframe跨域高度自适应,利用window.postMessage()实现跨域消息传递页面高度（JavaScript）

    在iframe跨域引用高度自适应这块写的js方式都试了不管用,最终使用的是window.postMessage() 跨域获取高度 传递信息 1.首先,在主页面上使用iframe引入子页面:也就是A.h ...

  3. javascript跨域通信（一）：利用location.hash实现跨域iframe自适应

    页面域关系: a.html所属域A:www.A.comb.html所属域B:www.B.com 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读 ...

  4. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  5. HTML5中Access-Control-Allow-Origin解决跨域问题

    www.111cn.net 更新:2015-01-07 编辑:flyfox 来源:转载 跨域在开发中一些是一个比较常见的问题虽然有json或者xml来解决,现在html5开始流行了,我们可以通过Acc ...

  6. div模拟textarea以实现高度自适应实例页面

    作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...

  7. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  8. [转载]跨域iframe高度自适应

    场景: 经常会有这样的需求,跟外部合作伙伴合作,要嵌入别人的页面,这时候就需要高度自适应了,在这种跨域的情况下如何解决呢? 解决: 在iframe(合作伙伴的页面,称为P页面)中创建一个隐藏的ifra ...

  9. JS跨域解决iframe高度自适应（IE8/Firefox/Chrome适用）

    参考园友的js跨越实现,有提到三种方式: 1. 中间页代理方式,利用iframe的location.hash 参见:http://www.5icool.org/a/201203/a1129.html ...

随机推荐

  1. 文件上传利器SWFUpload入门简易教程

    凡做过网站开发的都应该知道表单file的确鸡肋. Ajax解决了不刷新页面提交表单,但是却没有解决文件上传不刷新页面,当然也有其它技术让不刷新页面而提交文件,该技术主要是利用隐藏的iFrame, 较A ...

  2. html5 Canvas API

    详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...

  3. 在iOS中，实现点击搜索结果隐藏搜索结果的方法。

    不知道有没有别的什么的好的方法,最近在实现一个需求(点击搜索,然后输入搜索内容,显示搜索出来的结果,然后点击搜索结果,在当前页面显示所点击的结果的详细的信息).遇到的问题是,点击搜索结果的时候,搜索的 ...

  4. sql server 修改列类型

    如下代码中为修改bcp数据库中表B_TaskFileMonitor中的列FileSizeOriginal的类型为bigint use bcp; ); --判断是否存在这一列 IF COL_LENGTH ...

  5. sql server 查找字段上的约束

    1. 当字段没有默认值或者约束的时候可以使用: alter table [table_name] drop column [column_name] 来删除. 当有默认值的时候应该先删除默认值,然后再 ...

  6. UI1_UIScrollView

    // // AppDelegate.m // UI1_UIScrollView // // Created by zhangxueming on 15/7/10. // Copyright (c) 2 ...

  7. 基于python yield机制的异步操作同步化编程模型

    又一个milestone即将结束,有了些许的时间总结研发过程中的点滴心得,今天总结下如何在编写python代码时对异步操作进行同步化模拟,从而提高代码的可读性和可扩展性. 游戏引擎一般都采用分布式框架 ...

  8. spring IOC经典理解

    不多解释,直接上图片!

  9. C++ Vector 动态数组

    Vectors 包含着一系列连续存储的元素,其行为和数组类似.访问Vector中的任意元素或从末尾添加元素都可以在常量级时间复杂度内完成,而查找特定值的元素所处的位置或是在Vector中插入元素则是线 ...

  10. C++ 单链表基本操作

    链表一直是面试的高频题,今天先总结一下单链表的使用,下节再总结双向链表的.本文主要有单链表的创建.插入.删除节点等. 1.概念 单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数 ...