假设我们在当前页面要嵌套一个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. linux内存管理解析1----linux物理，线性内存布局及页表的初始化

    主要议题: 1分页,分段模式及实模式 2Linux分页 3linux内存线性地址空间布局及物理内存空间布局 4linux页表初始化及代码解析 1.1.1内存寻址和保护模式 在X86平台上,内存控制单元 ...

  2. 谈谈Javascript线程

          其实,大家都知道Javascript的语言执行环境是单线程的,浏览器无论在什么时候都有且只有一个线程在运行Javascript程序.那Ajax发送异步请求怎么解释,setTimeout/s ...

  3. 认识CoreData-使用进阶

    之前两篇文章都比较偏理论,文字表达比较多一些,但都是干货!学习时先理解理论知识,才能更好的帮助后面的理解.   在这篇文章中,将会涉及关于CoreData的一些复杂操作,这些操作会涉及分页查询.模糊查 ...

  4. 通过JSTL用表格的形式显示

    <%@ page language="java" import="java.util.*, cn.hncu.domain.*" pageEncoding= ...

  5. [转]ORACLE 绑定变量用法总结

    转:http://blog.csdn.net/wanghai__/article/details/4778343 在oracle 中,对于一个提交的sql语句,存在两种可选的解析过程, 一种叫做硬解析 ...

  6. 关于使用json 字符串转换为字典问题

    问题背景: '{"backend": "www.baidu.org", "record": {"server": &qu ...

  7. 常见的IE6兼容以及css兼容

    IE6虽然随着XP系统退出市场在国外基本基本消失,但是在国内依然占据很大的市场份额.政务网站.页游官网等依然要考虑到IE6用户的体验.如果你的网站使用CSS3等“新技术”时,就必须果断放弃IE6的兼容 ...

  8. ACM——简单排序

    简单选择排序 时间限制(普通/Java):1000MS/3000MS          运行内存限制:65536KByte总提交:836            测试通过:259 描述 给定输入排序元素 ...

  9. C++ Dialog Box Command IDs

    #define IDOK 1 #define IDCANCEL 2 #define IDABORT 3 #define IDRETRY 4 #define IDIGNORE 5 #define IDY ...

  10. Ext.Net学习笔记07：Ext.Net DirectMethods用法详解

    使用DirectMethods在JS中调用C#方法 我承认,这个标题有点噱头,其实应该是通过DirectMethods,在JS中通过异步调用的方式执行服务器端的方法. 来看一个例子吧: [Direct ...