在页面无刷新更新方面,虽然现在的ajax很强悍,但是处理代码相对多点。想比之下,iframe就简单多了!处理iframe的自适应宽、高,会经常用到,网上整理了一份,写在这里备用:

单个iframe 高度自适应:

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>

起作用的是这句:onload="this.height=iFrame1.document.body.scrollHeight"

多层嵌套iframe 高度自适应:
A页面的iframe:
<iframe id="frame_content" src=”B.php“ name="right" width="1003" frameborder="0" scrolling="no" ></iframe>

B.php页面又有一个iframe:
<iframe width="750" name="rightform" id="rightform" src="KinTimMng_right_init.php" frameborder="0" scrolling="no" onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';" ></iframe>

起作用的代码是这句:onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';"

onload的时候执行了两条js语句:

1、设置当前iframe自己的高度自适应
this.height=rightform.document.body.scrollHeight

2、设置父iframe的高度自适应(注意后面的高度单位px,如果不加单位,firefox下不起作用)
parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px'

以上代码在ie6、ie7、ie8、firefox3.5下测试通过

iframe自适应高度,多层嵌套iframe自适应高度的解决方法的更多相关文章

  1. Python爬虫关于多层嵌套iframe的解决

    近期由于公司资源需要,我爬取了一个视频网站,结果以为一个很容易的小爬虫,却步步是坑啊,费了一天终于都解决了(太菜了!!!). 前面导航页的爬虫就不多说了,无非就是webdriver和PhantomJS ...

  2. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  3. 文本框textarea根据输入内容自适应高度 和输入中文和数字换行解决方法

    textarea内容可从后台读取或手动输入,常规输入后中文和数字会出现换行问题 <style> #textarea { display: block; margin: 0 auto; ov ...

  4. 关于表格table嵌套,边框合并问题的解决方法,table嵌套(转)

    原文地址:http://www.cnblogs.com/zhangym118/archive/2016/05/16/5496931.html [问题] 外层table与内层table嵌套,内外表格都需 ...

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

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

  6. iframe嵌入其他网站,如何自适应高度

    终于有一周时间,工作不那么忙了,腾出手来总结下工作过程中学到的知识. 每天遇到新问题,解决新问题,但是却很少有时间去仔细研究下,或者总结下.攒的多了,就得从头捋一遍. 说下iframe自适应高度: 搜 ...

  7. 谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

    谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个 ...

  8. iframe之间通信问题及iframe自适应高度问题

    下面本人来谈谈iframe之间通信问题及iframe自适应高度问题. 1. iframe通信 分为:同域通信 和 跨域通信.所谓同域通信是指 http://localhost/demo/iframe/ ...

  9. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

随机推荐

  1. 洛谷 P3112 [USACO14DEC]后卫马克Guard Mark

    题目描述 Farmer John and his herd are playing frisbee. Bessie throws the frisbee down the field, but it' ...

  2. C#中 Thread,Task,Async/Await,IAsyncResult 的那些事儿![转载]

    说起异步,Thread,Task,async/await,IAsyncResult 这些东西肯定是绕不开的,今天就来依次聊聊他们 1.线程(Thread) 多线程的意义在于一个应用程序中,有多个执行部 ...

  3. springboot+swagger集成

    一.swagger介绍 Swagger 是一款RESTFUL接口的文档在线自动生成+功能测试功能软件.本文简单介绍了在项目中集成swagger的方法和一些常见问题.如果想深入分析项目源码,了解更多内容 ...

  4. CodeForces 682A Alyona and Numbers (水题,数学)

    题意:给定两个数 m,n,问你在从1到 n,和从 1到 m中任选两个数加起来是5的倍数,问你有多少个. 析:先计算 m 和 n中有多少个取模5是从0到4的,然后根据排列组合,相乘就得到了小于等于 m ...

  5. static 和final

    1.static       static关键字可以用来修饰类的变量,方法和内部类.static是静态的意思,也是全局的意思,它定义的东西属于全局,与类相关,不与具体实例相关.就是说它调用的时候,只是 ...

  6. vim最实用命令和快捷键

    参考文章,点这里 查找 1.命令模式下,按'/',然后输入要查找的字符,Enter./和?的区别是,一个向前(下)找,一个向后(上). 2.使用n命令来继续刚才的查找命令,如果我们想要停止这一查找,可 ...

  7. ubuntu同时安装Qt4.8和Qt5.7[认真写每篇博客^-^]

    这是ubuntu默认安装(从apt安装)的路径和相关文件,建议编译安装到/opt目录下. 从APT安装的默认文件夹 以下是我的安装情况,配置为qt4.8为默认. 安装包或源码下载地址: qt4:htt ...

  8. Apache mod_rewrite规则重写的标志说明

    1.R[=code](force redirect) 强制外部重定向,强制在替代字符串加上http://thishost[:thisport]/前缀重定向到外部的URL.如果code不指定,将用缺省的 ...

  9. [转载]uml 类图依赖与关联的区别

    原文链接:https://www.cnblogs.com/liuzhang/archive/2013/03/17/2964095.html 最近研究设计模式,看类图有点发虚!有些关系搞的不是很清楚.所 ...

  10. UT源码 065

    NextDate函数问题 NextDate函数说明一种复杂的关系,即输入变量之间逻辑关系的复杂性 NextDate函数包含三个变量month.day和year,函数的输出为输入日期后一天的日期. 要求 ...