假设我们在当前页面要嵌套一个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. Android开发百度地图（一）--显示基本地图

    最近由于比赛的需要,自己学习了一下百度地图的开发.希望以下的内容能够对大家有用. 一.开发前的准备工作: 1.注册百度账号,并登录.(有百度账号的话直接登录) 2.申请Key,地址:http://de ...

  2. 请列出你在从事IT生涯中,最难以忘怀的一次误操作

    IT系统最怕什么,我觉得就两点: 1.不可靠的软硬件. 2.误操作. 第一点就不用解释了,第二点是该文的内容,主要摘选自ITPUB的精华贴——[精华] 请列出你在从事DBA生涯中,最难以忘怀的一次误操 ...

  3. 在ModelSim波形图中以参数名显示变量

    在ModelSim波形图中以参数名显示变量 在使用Verilog HDL编写有限状态机等逻辑的时候,状态机的各个状态通常以参数表示,但当使用ModelSim仿真的时候,状态机变量在wave窗口中以二进 ...

  4. css所有选择器的详解

    ----------------------------------------css 选择器---------------------------------------- 1,组合选择器: 1)e ...

  5. web开发学习之旅---html第二天

    一.转义符 一些字符在html中拥有特殊的含义,比如小于号(<)用于定义 HTML 标签的开始.如果我们希望浏览器正确地显示这些字符,我们必须在 HTML 源码中插入转义符. 分类 二.html ...

  6. 几个MVC属性

    1   用于显示提示字符串 [Required(ErrorMessage="请输入类型名称")] public string ArticleTypeName { get; set; ...

  7. c#调用c++ dll(一)

    首先来说说c++中的dll 核心的一些知识 比较大的应用程序都由很多模块组成,这些模块分别完成相对独立的功能,它们彼此协作来完成整个软件系统的工作.可能存在一些模块的功能较为通用,在构造其它软件系统时 ...

  8. Android开发环境搭建（2015年8月更新）

    1.  下载和安装Android SDK Android的官方站点是http://www.android.com: 登录https://developer.android.com/intl/zh-cn ...

  9. iOS8 【xcode6中添加pch全局引用文件】

    前沿:xcode6中去掉了pch,为了一些琐碎的头文件引用,加快了 编译速度! xcode6之前的版本建项目就自动添加了是这样的: xcode6后的版本要自己手动的添加步骤如下: 1)  2) 3) ...

  10. JDBC实现往MySQL插入百万级数据

    想往某个表中插入几百万条数据做下测试, 原先的想法,直接写个循环10W次随便插入点数据试试吧,好吧,我真的很天真.... DROP PROCEDURE IF EXISTS proc_initData; ...