我们在使用iframe的时候,iframe的高度并不会根据内容的多少来改变它的高度,如何让它根据内容来改变它的高度呢?在网上也找了好多代码,觉得下面这段代码是最有效的:

 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);
}
var minHeight = $(window).height();
startInit('mainframe', minHeight);

html的源代码如下,index.html是你要引用的页面:

 <iframe src="index.htm" width="100%" height="100%" frameborder="0" name="mainframe" id="mainframe" scrolling="no"></iframe>

Save

Save

iframe高度根据内容变化的更多相关文章

  1. iframe高度自适应内容

    JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...

  2. textarea的高度随内容变化而变化

    <li class="text"> <span>参赛宣言*</span> <textarea name="txt" i ...

  3. iframe高度随内容自适应的方法

    我们知道,iframe最大的问题,就是高度的问题,如果你内容的高度是变化,要么你就给你的容器写个固定的高度,如果内容是未知的,显然这个方法并不能达到我们的想要的效果,要么就是通过js来解决这个问题. ...

  4. 页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应

    总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来 ...

  5. ECharts树图节点过多时取消缩放,调整容器高度自适应内容变化

    问题现象 使用ECharts树图,在数据维度大,节点过多时,所看到的内容会重叠交错,无法查看. 原因 在给定ECharts树图容器尺寸后,无论数据多么庞大或者稀少,数据始终会尝试在给定容器内撑满.全部 ...

  6. iframe高度动态自适应

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1294 一.前言碎碎念 ...

  7. jQuery解决iframe高度自适应代码

    网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...

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

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

  9. 如何使tinymce编辑器的高度随内容自变化(转载)

    如何使tinymce编辑器的高度随内容自变化 最简单的方法就是在配置时添加Autoresize插件: tinymce.init({ selector: "textarea", // ...

随机推荐

  1. 一些简单的C语言算法

    1. 要求输入一个正整数,打印下述图形 输入:5 输出: * ** *** **** ***** 实现代码如下: #include <stdio.h> int main(int argc, ...

  2. [连载]《C#通讯(串口和网络)框架的设计与实现》- 14.序列号的设计,不重复的实现一机一码

    目       录 第十四章     序列号的设计... 2 14.1        设计原则... 2 14.2        设计思想... 3 14.3        代码实现... 4 14. ...

  3. 关于MySql的1045错误修正

    很多情况数据库很久没有使用,偶尔打开会出现一系列错误,例如1045错误即是 mysql ERROR 1045 : Access denied for user‘root’@localhost(usin ...

  4. div仿textarea使高度自适应

    今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法…… <d ...

  5. javascript冒泡排序

    数组冒泡排序算法(升序) 升序:小数在前,大数在后 冒泡排序的原则:每次比较相邻两个元素,如果前一个数>后一个数,说明违反升序的要求,就将两数交换位置.否则,保持不变.继续比较下一对. 例如:玩 ...

  6. ES6之字符串扩展方法(常用)

    es6这个String对象倒是扩展了不少方法,但是很多都是跟字符编码相关,个人选了几个感觉比较常用的方法: includes 搜索字符的神器 还记得我们之前如何判断某个字符串对象是否包含特地字符的吗? ...

  7. canvas 制作flappy bird(像素小鸟)全流程

    flappy bird制作全流程: 一.前言 像素小鸟这个简单的游戏于2014年在网络上爆红,游戏上线一段时间内appleStore上的下载量一度达到5000万次,风靡一时, 近年来移动web的普及为 ...

  8. Dynamic CRM 查询实体记录 被共享给了 哪个用户

    --客户表名"new_customer" SELECT u.FullName AS 被共享人,a.new_name AS 客户名称,sup.SystemUserid AS 共享人I ...

  9. SharePoint Designer 2013 连接 Office 365 必需安装2个SP

    第一个: 32位电脑安装链接:http://www.microsoft.com/downloads/details.aspx?FamilyId=278a31eb-0cf9-4b30-a670-9c9d ...

  10. OC字符串基本操作

    不可变的字符串的修改方法有返回值(重新指向新的字符串地址) 可变的字符串的修改方法没有返回值(修改字符串本身) // NSString 不可变字符串 // 1.创建字符串对象 // 使用初始化方法创建 ...