转自: http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html

超级简单的方法,也不用写什么判断浏览器高度、宽度啥的。
下面的两种方法自选其一就行了。一个是放在和iframe同页面的,一个是放在test.html页面的。
注意别放错地方了哦。

iframe代码,注意要写ID

<iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"></iframe>

jquery代码1:

//注意:下面的代码是放在test.html调用
$(window.parent.document).find("#main").load(function(){
var main = $(window.parent.document).find("#main");
var thisheight = $(document).height()+30;
main.height(thisheight);
});

jquery代码2:

//注意:下面的代码是放在和iframe同一个页面调用
$("#main").load(function(){
var mainheight = $(this).contents().find("body").height()+30;
$(this).height(mainheight);
});

测试过,第二种有效,不过要注意一点是,增加的JS要写在iframe下面,放在头部是测试没有效果。
测试代码:

                <iframe id="mainframe" name="mainframe" marginwidth="0" marginheight="0" src="/Home/Activitylist"
frameborder="0" width="100%" scrolling="no" height="100%"></iframe>
<script type="text/javascript">
//注意:下面的代码是放在和iframe同一个页面调用,放在iframe下面
$("#mainframe").load(function () {
var mainheight = $(this).contents().find("body").height() + 30;
$(this).height(mainheight);
});
</script>

jquery 实现iframe 自适应高度的更多相关文章

  1. jquery iframe自适应高度[转]

      经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试. 很古老的方法: <iframe src="../In ...

  2. jquery 清空 iframe 的内容,,iframe自适应高度

    $(iframe).contents().find("body").html(""); iframe自适应高度 $("#AllDescription& ...

  3. 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

    今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...

  4. 让iframe自适应高度-真正解决

    需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...

  5. [转]让iframe自适应高度-真正解决

    原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...

  6. 【前端开发】前端引入公共部分footer header的几种方法,及iframe自适应高度js

    一.引入页面几种方法   1.IFrame引入,看看下面的代码    <iframe   frameborder=0   border=0   width=300   height=300    ...

  7. iframe自适应高度处理

    一中方法: 在子页面加载完毕的时候执行 parent.document.getElementById("iframe").height=0; parent.document.get ...

  8. js实现iframe自适应高度

    转自:http://www.jb51.net/article/15780.htm 对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的! 不带边框的iframe因为能 ...

  9. 网页制作技巧:iframe自适应高度

    转自:http://www.enet.com.cn/article/2012/0620/A20120620126237.shtml 通过Google搜索iframe 自适应高度,结果5W多条,搜索if ...

随机推荐

  1. Ubuntu 16.04 LAMP server tutorial with Apache 2.4, PHP 7 and MariaDB (instead of MySQL)

    https://www.howtoforge.com/tutorial/install-apache-with-php-and-mysql-on-ubuntu-16-04-lamp/ This tut ...

  2. 【NOI2015】荷马史诗[Huffman树+贪心]

    #130. [NOI2015]荷马史诗 统计 描述 提交 自定义测试 追逐影子的人,自己就是影子. ——荷马 Allison 最近迷上了文学.她喜欢在一个慵懒的午后,细细地品上一杯卡布奇诺,静静地阅读 ...

  3. 记住密码, 不需要默认填写的input框中设置 autocomplete="new-password"

  4. PHP服务器访问优化

    常规的优化措施: 磁盘写入,网络安全,证书加密,CPU,内存,DNS解析,数据库优化,页面gzip压缩 PHP gzip压缩打开: 打开php目录下的php.ini文件,找到zlib.output_c ...

  5. C# IEqualityComparer 去重

    1.去除list里某重复字段值的数据(相当于group by) public class CorrController { //方法 public void DoGet() { List<tes ...

  6. s3接口认证说明

    S3 Authorization太绕,太头痛,下面解释说明: XS3 REST API基于HMAC(哈希消息身份验证码)密钥使用自定义HTTP方案进行身份验证.要对请求进行身份验证,您首先需要合并请求 ...

  7. Ubuntu16.04 安装lamp环境

    拿到新装的ubuntu16.04新系统 首先 apt-get update 更新一下 我这里是root用户,如果您不是超级管理员,命令前加sudo即可 如果您加了sudo也不好使,那就联系管理员,给你 ...

  8. 代码使用了php的包管理器composer,include到你的php脚本

    使用数据库进行crontab配置管理,除非你能够保证数据库的请求能够在长时间内保持稳定响应的话.推荐使用nosql类型的cache存储,同时做好持久化备份. 测试代码: define('DS', DI ...

  9. Keepalived+Nginx高可用集群

    Keepalived简介 Keepalived的作用是检测服务器的状态,如果有一台web服务器宕机,或工作出现故障,Keepalived将检测到,并将有故障的服务器从系统中剔除,同时使用其他服务器代替 ...

  10. 专访|HPE软件部中国区总经理李时:HPE引领IT战略新形态

    ​2016年7月22日,「HPE&msup软件技术开放日」将在上海举办,msup携手HPE揭秘全球测试中心背后的12条技术实践. 李时:HPE软件部中国区总经理,将在本次开放日带来<HP ...