假设我们在当前页面要嵌套一个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. 使用ExpandableListView实现一个时光轴

    在许多App上都能看到时光轴的效果,比如携程等等,那么我们今天就利用ExpandableListView来实现一个时光轴效果,先来看看效果图: 效果还是挺简单的,这里我们主要是采用Expandable ...

  2. 获取随机颜色js

    获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...

  3. 组合模式(Composite Pattern)

    组合模式定义:组合模式允许你将对象组合成树形结构来表现"整体/局部"层次结构,组合能让客户以一致的方式处理个别对象以及对象组合. 当涉及到如:菜单,子菜单之类的问题时,会自然而然的 ...

  4. 深入Windows窗体原理及控件重绘技巧

    之前有学MFC的同学告诉我觉得Windows的控件重绘难以理解,就算重绘成功了还是有些地方不明白,我觉得可能很多人都有这样的问题,在这里我从Windows窗体的最基本原理来讲解,如果你有类似的疑惑希望 ...

  5. sql 游标循环遍历

    写存储过程的时候碰到一个需要对数据进行遍历循环操作的问题,最后通过游标解决了,感觉很适用. declare @level varchar() declare @uid varchar() declar ...

  6. 将Excel,ppt和word转化为html

    有些时候可能需要将Excel,ppt和word转化为html在页面上显示.我从网上查到一些代码,记录在这里以供需要的朋友参考 1.将word转化为html显示 //================== ...

  7. linux下apache-tomcat的安装

    一.JDK安装 1.安装JDK软件包 本例使用的JDK安装包为jdk-6u19-linux-x64.bin,该包是一个编译好的二进制可执行程序包,只需要执行即可安装. 首先进入存放JDK安装包的目录( ...

  8. iOS 9 Spotlight搜索 OC版

    介绍:    在WWDC 2015会议上,苹果官方公布了iOS9.除开许多新的特性和增强功能,这次升级也给了开发者们一个机会让他们的app里的内容能通过Spotlight 搜索功能被发现和使用.在iO ...

  9. OC与Swift的区别二(常量、变量、运算符)

    4.常量与变量声明 oc的变量声明使用  类型 变量名 ＝ 变量值的方式,其中类型为系统内置数据类型或自定义类型,变量名需由英文字母开头且不能包含特殊字符 swift变量声明使用 var 变量名 ＝ ...

  10. Net中exe之间的消息传递

    1.创建一个消息通讯类 using System;using System.Collections.Generic;using System.Linq;using System.Text;using ...