iframe高度根据内容变化
我们在使用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高度根据内容变化的更多相关文章
- iframe高度自适应内容
JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...
- textarea的高度随内容变化而变化
<li class="text"> <span>参赛宣言*</span> <textarea name="txt" i ...
- iframe高度随内容自适应的方法
我们知道,iframe最大的问题,就是高度的问题,如果你内容的高度是变化,要么你就给你的容器写个固定的高度,如果内容是未知的,显然这个方法并不能达到我们的想要的效果,要么就是通过js来解决这个问题. ...
- 页面嵌套iframe时,怎样让iframe高度根据自身内容高度自适应
总体思路是这样的,因为iframe里页面的内容是动态加载的,而且电脑屏幕宽度发生变化时,也得相应的去改变iframe标签的高度(如果高度确定就不用这么麻烦了): 首先,我们在父页面中定义一个方法,用来 ...
- ECharts树图节点过多时取消缩放,调整容器高度自适应内容变化
问题现象 使用ECharts树图,在数据维度大,节点过多时,所看到的内容会重叠交错,无法查看. 原因 在给定ECharts树图容器尺寸后,无论数据多么庞大或者稀少,数据始终会尝试在给定容器内撑满.全部 ...
- iframe高度动态自适应
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1294 一.前言碎碎念 ...
- jQuery解决iframe高度自适应代码
网上查了好多用着都不行,自己搞定了:在包含iframe的页面中加入以下脚本,基本思想是在iframe加载内容后重新设置高度,下面代码尽在IE6中用过,没在其他浏览器中测试. 代码如下: <scr ...
- iframe高度自动随着子页面的高度变化而变化(不止要在iframe标签里加上this.height=this.contentWindow.document.body.scrollHeight)
最近使用iframe整合页面遇到一些难题,走了很多弯路才解决,借此记录一下: 1 <!-- 页面主体内容 --> 2 <div class="iframe-wrapper& ...
- 如何使tinymce编辑器的高度随内容自变化(转载)
如何使tinymce编辑器的高度随内容自变化 最简单的方法就是在配置时添加Autoresize插件: tinymce.init({ selector: "textarea", // ...
随机推荐
- bzoj3388(神奇的解法)
题目大意: 约翰的表哥罗恩生活在科罗拉多州.他近来打算教他的奶牛们滑雪,但是奶牛们非常害羞,不敢在游人如织的度假胜地滑雪.没办法,他只好自己建滑雪场了.罗恩的雪场可以划分为W列L行(1≤W≤500;1 ...
- 成就PHP高手的五个必由之路
亲们,此文时转载过来的,不是原创!特此说明一下 原文名称:5 ways to be a better php developer原文链接:http://www.developertutorials.c ...
- OS存储管理——FIFO,LRU,OPT命中率
课程设计课题 存储管理程序设计 摘 要 虚拟存储器作为现代操作系统中存储管理的一项重要技术,实现了内存扩充功能.而分页请求分页系统正好可以完美的支持虚拟存储器功能,它具有请求调页功能和页面置换功能.在 ...
- 如何写出安全的API接口?接口参数加密签名设计思路
开发中经常用到接口,尤其是在面向服务的soa架构中,数据交互全是用的接口. 几年以前我认为,我写个接口,不向任何人告知我的接口地址,我的接口就是安全的,现在回想真是too young,too simp ...
- Atitit.兼具兼容性和扩展性的配置方案attilax总结
Atitit.兼具兼容性和扩展性的配置方案attilax总结 文件配置法1 Jdbc多数据源文件配置发1 Bat文件配置法1 改进的文件配置法(采用类似i18n技术) 推荐1 使用自动化pc_id的方 ...
- mysql中,sleep进程过多,如何解决?
睡眠连接过多,会对mysql服务器造成什么影响? 严重消耗mysql服务器资源(主要是cpu, 内存),并可能导致mysql崩溃. 造成睡眠连接过多的原因? 1. 使用了太多持久连接(个人觉得,在高并 ...
- powerdesigner显示列描述信息
将Comment中的字符COPY至Name中 -------------------------------------------------- Option Explicit Validati ...
- CssStats – 分析和优化网站 CSS 代码的利器
CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CS ...
- Linux 学习
远程登录Linux(05) 文本方式远程: putty SecureCRT winSCP SshClient图形方式远程:Xmanager Xming ifconfigps -ef | gr ...
- 集成shareSDK错误总结(新浪微博)
错误1. . 以上错误是由于没有添加-ObjC的原因,在targets->Build Setting ->Other Linker Flags中添加-ObjC 添加方法如下 错误2 授权回 ...