在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度。

这时候找到了一个解决方法:

<iframe name="my_iframe" id="mainframe" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height="100%" src=""></iframe>

2、记住要引入iframe.js文件
<script type="text/javascript" src="js/iframe.js" ></script>

下面是iframe.js的具体内容

var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
var isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
var isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
var isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
var isIE = (!!window.ActiveXObject || "ActiveXObject" in window);
var isIE9More = (! -[1, ] == 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 && isIE9More) {//ie9+
var heightDeviation = bHeight - eval("window.IE9MoreRealHeight" + iframeId);
if (heightDeviation == 0) {
bHeight += 3;
} else if (heightDeviation != 3) {
eval("window.IE9MoreRealHeight" + iframeId + "=" + bHeight);
bHeight += 3;
}
}
else//ie[6-8]、OPERA
bHeight += 3; var height = Math.max(bHeight, dHeight);
if (height < minHeight) height = minHeight;
iframe.style.height = height + "px";
} catch (ex) { }
}
function startInit(iframeId, minHeight) {
eval("window.IE9MoreRealHeight" + iframeId + "=0");
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight + ")", 100);
}

方法二:(<iframe>标签自适应高度和宽度 )

  1、HTML结构

<iframe src="index.html" id="iframepage" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" onLoad="iFrameHeight()">
</iframe>

  2、js:

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

自动适应iframe右边的高度的更多相关文章

  1. 跨域iframe如何实现高度自适应?

    经常有项目会要求实现iframe高度自适应,如果是同域的还好说,如果是跨域的,父页面没有办法操作子页面,想要正确获取子页面高度的话,可以采用以下办法: 方法一:使用HTML5 postMessage ...

  2. jquery库实现iframe自适应内容高度和宽度

    javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id=&qu ...

  3. 自动设置iframe大小的jQuery代码

    自动设置iframe的宽度,如何用jquery来实现呢? 代码: <iframe src="main_folder.aspx" class="global_main ...

  4. jQuery实现iframe的自适应高度

    假设我们在当前页面要嵌套一个iframe 1 <iframe id="myframe" src="test.html" height="240& ...

  5. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

  6. iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)

    最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...

  7. Iframe 父页面自动获取子页面的高度

    <iframe id="mainweb" name="mainweb" src="http://www.baidu.com/" bor ...

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

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

  9. iframe 自适应内容高度

    在使用iframe的时候,会出现iframe不能随着内容的高度自动改变的情况,下面就介绍一种可以自适应高度的办法.<br/> <pre> <iframe id=" ...

随机推荐

  1. Testing - FURPS模型

    FURPS wiki - FURPS FURPS是功能.易用性.可靠度.性能及可支持性(supportability)五个词英文前缀的缩写,是一种识别软件质量属性的模型. 其中功能部份对应功能需求,另 ...

  2. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  3. 数据库备份与还原SQL代码

    --备份数据库 --必须先创建Backup文件夹 ) SET @name = 'D:\Backup\DingHanECard_V2_ZQGDJ_' ), ) + '.bak' BACKUP DATAB ...

  4. java基础--相等

    学习:http://www.cnblogs.com/dolphin0520/p/3780005.html#3163302 后发现居然有这么个东西,当然也不会注意什么自动拆箱和装箱,只知道用就行了.不过 ...

  5. cdh完美集成kafka

    前言 其实cloudera已经做了这个事了,只是把kafka的包和cdh的parcel包分离了,只要我们把分离开的kafka的服务描述jar包和服务parcel包下载了,就可以实现完美集成了. 具体实 ...

  6. Guid算法与标识列(自动增长字段)在表中的应用

    <<1>>int(bigint)+标识列(自动增长字段) 用标识列实现字段自增可以避免并发等问题.不需开发人员自己控制自增,用标识列的字段在Insert的时候不用指定主键的值. ...

  7. MVVM-Sidekick 之SendToEventRouterAction使用

    在WP开发中点击列表项跳转到详情页是一个很常用的功能,但是有可能项模板中还有其他的区域,比如点击标题跳转到详情页,点击"赞"图标送一个赞,点击"踩"图标踩一下, ...

  8. 最短路径---Dijkstra/Floyd算法

    1.Dijkstra算法基础: 算法过程比prim算法稍微多一点步骤,但思想确实巧妙也是贪心,目的是求某个源点到目的点的最短距离,总的来说dijkstra也就是求某个源点到目的点的最短路,求解的过程也 ...

  9. iOS阶段学习第26天笔记(UILabel的介绍)

    iOS学习(UI)知识点整理 一.关于UILabel的使用介绍 1)概念:UILabel是一个继承自UIView的用于展示文本信息的控件 2)UI中所有的控件都继承自UIView 即UIView 是U ...

  10. 转型?还是延伸?开源建站系统近乎推整套SNS社区解决方案

    转型?还是延伸?开源建站系统近乎推整套SNS社区解决方案 近乎(英文:Spacebuilder),作为.net领域的SNS社区建站系统代表之一,一直在技术开发领域算是兢兢业业,在Discuz!和Php ...