代码如下:
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. apache windowns 下wamp配置多站点的问题

    1.多站点配置找到apache下面的 conf/httpd.conf # Virtual hostsInclude conf/extra/httpd-vhosts.conf  //将这句前面的#号注释 ...

  2. Javascript加载速度慢解决办法

    通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊,一堆,最后弄得页面加载速度很慢,很慢.解决办法:换一个js包含的方式,让javascript加载速度倍 ...

  3. QtPropertyBrowser+vs2010的安装与配置(转)

    这一篇文章有些问题,后又写了一篇,地址是http://www.cnblogs.com/aminxu/p/4552410.html 转自http://blog.csdn.net/jingwenlai_s ...

  4. Mac OS X中开启或关闭显示隐藏文件

    打开终端,输入:defaults write com.apple.finder AppleShowAllFiles -bool true 此命令显示隐藏文件defaults write com.app ...

  5. Application 统计在线人数

    MVC 统计在线人数: protected void Application_Start() { Application[; AreaRegistration.RegisterAllAreas(); ...

  6. 20141017--异常语句try-catch

    //try-catch 尝试(try)-抓获(catch) try//尝试,保护起来,使程序出错也能执行 { //确定不会出错时不要用try,当不确定时使用try-catch可以捕获错误, int i ...

  7. 8个web前端的精美HTML5 & CSS3效果及源码下载

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  8. 《linux下sudo服务的使用》RHEL6

    /bin/ 下放的二进制文件命令都是普通用户可以使用的 Sbin 下放的二进制文件命令都是超级用户root可以使用的   普通用户也想使用Sbin下的文件可以通过sudo来实现: 默认普通用户是不可以 ...

  9. winform：无法引用其他类库,dll,using等个人看法【图】

    在项目类库中已经引用了相关了类库,生成解决方案也没问题,但是到了后置代码,通过using引用其他类库的时候,再生成解决方案或者生成单个类库,就会报“未能找到类型或命名空间“xxx"(是否缺少 ...

  10. margin的BUG

    在进行简单的div盒子嵌套时,发现设置margin-top时存在bug,然后就去谷歌搜索了一下,发现margin确实存在bug. bug的现象是父子元素嵌套时,如果子元素是块元素时,对块元素设置mar ...