Iframe 自适应高度并实时监控高度变化的js代码
不得不用到iframe,且被强烈要求不能让它出现滚动条!嵌入的页面肯定是高度不一的,页面中也不能出现大片空白,所以也不能写死高度!真是麻鬼烦啊!google N次 + 百度M次 + 试验了1605次之后(听说农药1605就是实验了这么多次后出来的),得出下面成果,在IE7及Firefox3里试了下还能凑合着用用!
1、首先给出个Iframe。
<iframe id="ifrm"
marginheight="0"
marginwidth="0"
height="100"
width="1000"
frameborder="0"
scrolling="no"
src="xxxxx.html">
</iframe>
2、然后看看怎么获取Iframe中的页面的高度。
其实最麻烦的就是怎么让获取的高度准确,不同的方式不同的浏览器中获取到的值都会不一样!晕啊~~。参考了多方意见得出以下javascript函数(doc参数为window.document对象):
function getDocHeight(doc)
{
//在IE中doc.body.scrollHeight的可信度最高
//在Firefox中,doc.height就可以了
var docHei = 0;
var scrollHei;//scrollHeight
var offsetHei;//offsetHeight,包含了边框的高度
if (doc.height)
{
//Firefox支持此属性,IE不支持
docHei = doc.height;
}
else if (doc.body)
{
//在IE中,只有body.scrollHeight是与当前页面的高度一致的,
//其他的跳转几次后就会变的混乱,不知道是依照什么取的值!
//似乎跟包含它的窗口的大小变化有关
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;
}
else if(doc.documentElement)
{
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;
}
/*
docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符!
*/
return docHei;
}
3、最后修改Iframe的高度,并用一个定时器来不间断检查它包含的页面的高度变化。
function doReSize()
{
var iframeWin = window.frames['ifrm'];
var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): document.all? document.all['ifrm']: null;
if ( iframeEl && iframeWin )
{
var docHei = getDocHeight(iframeWin.document);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
else if(iframeEl)
{
var docHei = getDocHeight(iframeEl.contentDocument);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
}
function runResizeTask()
{
doReSize();
setTimeout("runResizeTask()",500);//每隔半秒执行一次
}
runResizeTask();
在这里就没有去考虑被包含的页面中是否有折叠、隐藏/展现的情况了!
完整js代码
<script language="javascript" type="text/javascript">
function getDocHeight(doc){
//在IE中doc.body.scrollHeight的可信度最高
//在Firefox中,doc.height就可以了
var docHei = 0;
var scrollHei;//scrollHeight
var offsetHei;//offsetHeight,包含了边框的高度 if (doc.height){
//Firefox支持此属性,IE不支持
docHei = doc.height;
}
else if (doc.body){
//在IE中,只有body.scrollHeight是与当前页面的高度一致的,
//其他的跳转几次后就会变的混乱,不知道是依照什么取的值!
//似乎跟包含它的窗口的大小变化有关
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;
}
else if(doc.documentElement){
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;
}
/*
docHei = Math.max(scrollHei,offsetHei);//取最大的值,某些情况下可能与实际页面高度不符!
*/
return docHei;
}
function doReSize(){
var iframeWin = window.frames['Main'];
var iframeEl = window.document.getElementById? window.document.getElementById('Main'): document.all? document.all['Main']: null;
if ( iframeEl && iframeWin ){
var docHei = getDocHeight(iframeWin.document);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
else if(iframeEl){
var docHei = getDocHeight(iframeEl.contentDocument);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
} function runResizeTask(){
doReSize();
setTimeout("runResizeTask()",1000);//每隔1秒执行一次
}
runResizeTask();
</script>
Iframe 自适应高度并实时监控高度变化的js代码的更多相关文章
- Reachability实时监控网络变化
Reachability是一种实时观察网络发生变化控件,如当你的手机处于WiFi情况下,他就会检测环境,当处于GPS的情况下改变环境,当处于无网络的情况下又是一种环境.下面我们看下关于Reachabi ...
- sqlserver ,镜像数据库,CDC,实时监控数据变化
1.数据库镜像配置 1)主机环境:计算机名称修改SQL1.xiaoping.com 添加用户sqluser 密码永不变,率属于administrators sqlserver安装时,将所有sqlser ...
- 实时监控文件变化以及处理xml(仅用作笔记用,防止以后要用)
private static void WatcherStrat(string path, string filter) { try { FileSystemWatcher watcher = new ...
- 在windows下实时监控、接受文件变化小工具
在windows下实时监控文件变化小工具 在测试的时候,我们可能想实时监控系统打出的log信息,在unix系统上我们可以用"tail -f"实现,在windows下一般就无法做 ...
- linux实时监控并实时备份数据(rsync)
目录 一:rsync实时监控备份流程 1.安装rsync(服务端 与 客服端)守护进程模式 2.修改配置文件(服务端) 3.解析配置内容 4.创建系统用户 5.创建密码文件 6.授权(必须授权为600 ...
- 3、架构--cp、scp、rsync、实时监控与同步
笔记 1.晨考 1.VPN的搭建步骤 2.vpn中的iptables是什么作用? 网络转发 2.昨日问题 1.yum源问题 2.VPN链接正常,但是没办法通过172 3.VPN链接时,出现了DNS错误 ...
- 动手实现 Redux(二):抽离 store 和监控数据变化
上一节 的我们有了 appState 和 dispatch: let appState = { title: { text: 'React.js 小书', color: 'red', }, conte ...
- 第1节 storm日志告警:1、 - 5、日志监控告警业务需求、代码、集群运行、总结
如何解决短信或者邮件频繁发送的问题:每次发送的时候都先查询数据库记录,看一下有没有给这个人发送消息,上一次发送消息的时间是什么时候,如果发送时间间隔小于半个小时,就不要再发了 ============ ...
- js实现iframe自适应高度
转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...
随机推荐
- Android性能优化典范---转
Android性能优化典范 原文链接: http://hukai.me/android-performance-patterns/ JAN 17TH, 2015 | COMMENTS 2015新年伊 ...
- 我想操作的是利用SqlDataAdapter的几个Command属性(InsertCommand,UpdateCommand,DeleteCommand)来更新数据库
我想操作的是利用SqlDataAdapter的几个Command属性(InsertCommand,UpdateCommand,DeleteCommand)来更新数据库代码:SqlConnection ...
- 改变MyEclipse创建JSP时默认的pageEncoding编码
如何改变MyEclipse创建JSP时默认的pageEncoding编码 有时我们需要改变MyEclipse创建JSP时默认的pageEncoding编码,因为也许它默认的编码不是我们想要的,比如我们 ...
- ural1028 Stars
Stars Time limit: 0.25 secondMemory limit: 64 MB Astronomers often examine star maps where stars are ...
- Naive Bayes在mapreduce上的实现
Naive Bayes是比较常用的分类器,因为思想比较简单.之所以说是naive,是因为他假设用于分类的特征在类确定的条件下是条件独立的,这个假设使得分类变得很简单,但会损失一定的精度. 具体推导可以 ...
- Mac下eclipse导入其他工程中文注释出现乱码解决方案
因为用的是mac版的eclipse,导入其他工程注释出现乱码的情况,找了网上的很多方法,大部分都是说的workspace,在这里修改,但是我修改之后还是乱码,最后发现这样一个方法,才得以解决. 点击 ...
- CSS-学习笔记六
1. 自适应,响应式布局 2. pure 3. Animate
- 关于OC和Swift使用GIT创建项目
1.先进入码云,点击自己的头像 -> ,2.里面有一个SSH公钥,点击 ,3.之后在终端输入 ssh-keygen -t rsa -C “xxxxx@xxx.com”,注意:”” 要用英 ...
- iOS开发——实时监控网速(仅作参考,发现一点问题)
开发中用到获取网速的地方,应该就两种: 1.下载速度,这种可以直接在接受数据的地方统计计算.这个就不讲了. 2.获取手机网卡的数据,可以监控网卡的进出流量,下面就是. #import "Vi ...
- [Lua]Mac系统上安装Lua环境
1.下载 Lua语言的官方网站 http://www.lua.org/ 下载最新版本的Lua环境 2.安装 解压下载包lua-5.3.1.tar.gz 打开终端Terminal 使用cd命令进入该目录 ...