假设我们在当前页面要嵌套一个iframe

1
<iframe id="myframe" src="test.html" height="240" width="100%" frameborder="0" scrolling="auto"></iframe>

那么我们在test.html中的代码如下

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery实现iframe的自适应高度</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//注意：下面的代码是放在test.html调用,并且id跟test.html中的iframe的id要保持一致
$(window.parent.document).find("#myframe").load(function(){
    var main = $(window.parent.document).find("#myframe");
    var thisheight = $(document).height()+30;
    main.height(thisheight);
});
</script>
</head>
<body>
<div style="height:300px;background:#ff0000">我是来测试高度的</div>
</body>
</html>

演示效果

转载请注明来源：Web前端(W3Cways.com) - Web前端学习之路 » jQuery实现iframe的自适应高度

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

  1. iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

    来源于crm项目的contact/edit.html 一.背景是这样的 最近在做crm系统的前端页面,有一个页面呢,点击“查看全部信息”时会弹出,这个弹窗里面又有分页导航,分页不是使用ajax 异步刷 ...

  2. 关于使用iframe标签自适应高度的使用

    在ifrome内设定最小高度,(此方法只适用于页面内切换高度不一.但是会保留最大高度,返回后保持最大高度不再回到最初页面的高度) <iframe id="one4" widt ...

  3. iframe内容自适应高度

    一直觉得要用JS才能实现iframe高度的自适应,其实CSS也可以,而且实现的更好,只是需要给包裹iframe的DIV设置个高度,然后让irame高度设置成100%就可以自适应了. 完美版Iframe ...

  4. jquery获得iframe内容的高度

    html: <iframe name="rightgp" id="right_frame_h" src="/Poster/rightgp&quo ...

  5. iframe 标签自适应高度和宽度

    iframe 结构如下 <iframe src="index.html" id="frame" frameborder="0" scr ...

  6. iframe的自适应高度

    <iframe src="index.html" id="iframepage" name="iframepage" frameBor ...

  7. <iframe>标签自适应高度和宽度

    <iframe src="index.html" id="iframepage" frameborder="0" scrolling= ...

  8. iframe实现自适应高度

    代码简单,兼容性还可以 <script>function SetWinHeight(obj) {  var win=obj;  if (document.getElementById)   ...

  9. jquery文本框textarea自适应高度

    浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id=&quo ...

随机推荐

  1. 整理 iOS 9 适配中出现的坑

    本文主要是说一些iOS9适配中出现的坑,如果只是要单纯的了解iOS9新特性可以看瞄神的开发者所需要知道的 iOS 9 SDK 新特性.9月17日凌晨,苹果给用户推送了iOS9正式版,随着有用户陆续升级 ...

  2. Linux Bash终端支持中文显示

    方法:修改系统变量LANG 即时生效: LANG=en_US.UTF- 永久生效: 修改.bashrc,加入 fi

  3. jquery登录验证插件

    最近写了个登录验证的jquery插件,其中功能还不是很完善,需要进一步改进,先放出来看看先. /** * 功能描述:本模块实现普通网站登录验证,以后可以添加二维码验证,以及第三方帐号登录验证 * 关联 ...

  4. Spring整合JMS(一)——基于ActiveMQ实现

    1.1     JMS简介 JMS的全称是Java Message Service,即Java消息服务.它主要用于在生产者和消费者之间进行消息传递,生产者负责产生消息,而消费者负责接收消息.把它应用到 ...

  5. 用ModelSim仿真SDRAM操作

    之前写了两篇关于Modelsim仿真的blog,其中模块管脚的命名可能让人觉得有些奇怪,其实不然,之前的两篇内容都是为了仿真SDRAM操作做铺垫的. 由于SDRAM的仿真过程相对比较复杂,也比较繁琐. ...

  6. C# ADO.NET参数查询

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. Android XML解析

    解析XML有三种方式:Dom.SAX.Pull 其中pull解析器运行方式与SAX类似. 我们首先认识pull解析器:http://developer.android.com/intl/zh-cn/r ...

  8. WCF学习系列二_使用IIS发布WCF服务

    原创作者:灰灰虫的家http://hi.baidu.com/grayworm 上一篇中,我们创建了一个简单的WCF服务,在测试的时候,我们使用VS2008自带的WCFSVCHost(WCF服务主机)发 ...

  9. Get AD user 的三种方法

    一. 通过AccountManagement 程序集(System.DirectoryServices.AccountManagement) acountManagement 包含有: 1. User ...

  10. POJ 2711 Regular Words（DP + 高精度）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1711 题目大意:给定一个正整数n,产生一个3*n位长的串,要求这个串 ...