我页面中的iframe

<iframe name="mainFrame" id="mainFrame" src="/account/${pageName}"  width="100%" height="100%"
frameborder=0 marginheight="0" marginwidth="0" scrolling="no"></iframe>

一共试了三种,目前感觉最好的一种:

<script>
$(function(){
$("#mainFrame").load(function(){
var mainheight = $(this).contents().find("body").height()+10;
$(this).height(mainheight);
});
});
</script>

参考:http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html

第二种: 问题:高度只可以增加不能减小

<script type="text/javascript">
function iFrameHeight() {
var ifm = document.getElementById("accountIndexIframe");
var subWeb = document.frames ? document.frames["accountIndexIframe"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
// ifm.width = subWeb.body.scrollWidth;
}
}
</script>

参考:http://www.cnblogs.com/Nbge/archive/2013/06/14/3135697.html

第三种:问题 使用的时候出现不顺畅的情况,点击第一次会失效,第二次才有用

<script type="text/javascript">
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = false, isFireFox = false, isChrome = false, isSafari = false, isIE = false;
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var bHeight = 0;
if (isChrome == false && isSafari == false)
bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
else if (isIE == false && isOpera == false)
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
else if (isIE == true && ! -[1, ] == false) { } //ie9+
else
bHeight += 3; var height = Math.max(bHeight, dHeight);
if (height < minHeight) height = minHeight;
iframe.style.height = height + "px";
} catch (ex) { }
}
function startInit(iframeId, minHeight) {
isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
if (!!window.ActiveXObject || "ActiveXObject" in window)
isIE = true;
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}
startInit('mainFrame', 500);//开始调用
</script>

出自:http://www.cnblogs.com/slyzly/articles/2422737.html

iframe自适应高度问题的更多相关文章

  1. jquery 清空 iframe 的内容,,iframe自适应高度

    $(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...

  2. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  3. jquery iframe自适应高度[转]

      经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试. 很古老的方法: <iframe src="../In ...

  4. js实现iframe自适应高度

    转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...

  5. 网页制作技巧:iframe自适应高度

    转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...

  6. Iframe 自适应高度的方法!

    第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

  7. iframe自适应高度的多种方法小结

    转自:http://www.jb51.net/article/15780.htm 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小 ...

  8. iframe自适应高度的多种方法方法小结

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的  不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...

  9. [转载]再谈iframe自适应高度

    Demo页面:主页面 iframe_a.html ,被包含页面 iframe_b.htm 和 iframe_c.html 下面开始讲: 通过Google搜索iframe 自适应高度,结果5W多条,搜索 ...

  10. iframe自适应高度的多种方法方法小结(转)

    对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...

随机推荐

  1. C#发送邮件三种方法(Localhost,SMTP,SSL-SMTP)

    原文:C#发送邮件三种方法(Localhost,SMTP,SSL-SMTP) 最近公司由于一个R&I项目的需要,用户要求在购买产品或出货等一些环节,需要发送邮件提醒或者说每周一让系统自动采集数 ...

  2. 对Extjs中时间的多种处理

    1.类型为datetime的json数据处理 (字段类型为datetime) new Date(parseInt(yourTime.substring(6, yourTime.length - 2)) ...

  3. Apworks到底是什么?

    Apworks到底是什么? 简介 Apworks是一款基于Microsoft .NET的面向领域驱动的企业级应用程序开发框架,它适用于以领域模型为核心的企业级系统的开发和集成.Apworks不仅能够很 ...

  4. 使用maven+eclipse搭建最简单的struts2的helloworld

    使用maven+eclipse搭建最简单的struts2的helloworld 一.web分层结构简介 1.web[细]粒度分层结构: 按细粒度分层可以分为以下6种: 1).表现层:html/css/ ...

  5. AngularJS的工作原理1

    AngularJS的工作原理 个人觉得,要很好的理解AngularJS的运行机制,才能尽可能避免掉到坑里面去.在这篇文章中,我将根据网上的资料和自己的理解对AngularJS的在启动后,每一步都做了些 ...

  6. Day4:T3搜索 T4数学题排列组合

    T3:搜索 很出名的题吧,费解的开关 同T2一样也是一题很考思考的 附上题解再解释吧: 对于每个状态,算法只需要枚举第一行改变哪些灯的状态,只要第一行的状态固定了,接下来的状态改变方法都是唯一的:每一 ...

  7. Day4:T1小技巧(类似于指针操作)T2搜索+小细节

    Day4:其中有很多小技巧get T1 一直没有听到过像这样的小技巧的略专业名词,有点类似于指针操作,之前有碰到过很多这样的题目 每次都是以不同的形式出现,但是感觉思想还是有点接近的吧(就比如某天有一 ...

  8. Excel报表开发(主要讲Excel的导入和导出)

    一.Excel数据导入 连接字符串Excel2003版: OleDbConnection conn = new OleDbConnection("provider=Microsoft.Jet ...

  9. MongoDB:利用官方驱动改装为EF代码风格的MongoDB.Repository框架 六:支持多数据库操作

    本次主要内容:修正MongoDB.Repository框架对多数据库的支持. 在之前的五篇文章中对MongoDB.Repository框架做了简单的介绍是实现思路.之前是考虑MongoDB.Repos ...

  10. [转]Whirlwind Tour of ARM Assembly

    ref:http://www.coranac.com/tonc/text/asm.htm 23.1. Introduction Very broadly speaking, you can divid ...