在开发项目过程中,用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. Unity3D 简单的倒计时

    using System; using UnityEngine; using System.Collections; public class TimeCountdown : MonoBehaviou ...

  2. javascript学习目录

    类型系统 [1]基本数据类型 [2]引用类型中的对象Object [3]引用类型中的数组Array [4]引用类型中的时间Date [5]函数Function [6]正则表达式RegExp [7]包装 ...

  3. 如何对SharePoint网站进行预热(warmup)以提高响应速度

    问题描述 SharePoint Server是一个易于使用的协作平台,目前在越来越多的企业中被应用开来.SharePoint Server是通过网站的形式向最终用户提供服务的,而这个网站是基于ASP. ...

  4. Express调用mssql驱动公共类dbHelper

    直接上代码: /** * Created by chaozhou on 2015/9/18. */var mssql = require('mssql');var user = "sa&qu ...

  5. 网络通信之Socket与LocalSocket的比较

    Socket与LocalSocket都可以实现网络通信,两个有什么区别呢? LocalSocket其通信方式与Socket差不多,只是LocalSocket没有跨越网络边界. 于是,思考到一个问题:a ...

  6. 【Android】Camera 使用浅析

    Camera的简单使用浅析 由于最近工作上用到android.hardware.Camera这个类,于是简单的学习了一些基本用法. 首先注意:Camera这个类在API21以后就不推荐使用了,官方提供 ...

  7. Auto Mapper03

      经过上一篇博客的学习,大体了解了Auto Mapper的运行机制和操作流程.我们下来学习下,AutoMapper里面具体的一些东西. 一:规则       当我们使用AutoMapper创建实体和 ...

  8. Android SDK Android NDK Android Studio 官方下载地址

    2016.12 Android Studio Windows Includes Android SDK https://dl.google.com/dl/android/studio/install/ ...

  9. Nancy 自定义JsonSerializer

    1.创建自己的jsonserializer类 public class CustomJsonNetSerializer : JsonSerializer, ISerializer { public C ...

  10. What Can Java Technology Do?

    What Can Java Technology Do? The general-purpose(多用途的), high-level Java programming language is a po ...