假设我们在当前页面要嵌套一个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. jdk安装 java运行编译（不含语法）

    一.开发的准备 1.jdk的安装(window) (1)根据自己的电脑下载对应的jdk,并安装 (推荐安装在没有中文的目录中). 网站 http://www.oracle.com/technetwor ...

  2. Thumb

    这个控件,真不好介绍,MSDN上也是草草几句,反正就是可以让用户拖动的玩意儿,但是,你会发现,当你在该控件上拖动时,它没有反响,也就是说这个东西默认不做任何操作的,它是赖在那里什么都不干,除非你去踢上 ...

  3. 关于FPGA异步时钟采样--结绳法的点点滴滴

    一.典型方法 典型方法即双锁存器法,第一个锁存器可能出现亚稳态,但是第二个锁存器出现亚稳态的几率已经降到非常小,双锁存器虽然不能完全根除亚稳态的出现(事实上所有电路都无法根除,只能尽可能降低亚稳态的出 ...

  4. jquery处理textarea中的手动换行

    textarea的手动换行会产生换行标志,但这个标志存在却看不到,存入数据库中后读出来显示在页面上却不会换行,如何处理呢? 网上众说纷纭,经过测试用 textarea的内容.replace(/\n/g ...

  5. 数据结构与算法JavaScript 读书笔记

    由于自己在对数组操作这块比较薄弱,然后经高人指点,需要好好的攻读一下这本书籍,原本想这个书名就比较高深,这下不好玩了.不过看着看着突然觉得讲的东西都比较基础.不过很多东西,平时还是没有注意到,故写出读 ...

  6. 移动端rem布局的适配mixin【转藏】

    /*================================================================ 以下为基于ip5 宽度320做的适配,标准html{font-si ...

  7. ionic 手机端如何嵌入视频iframe

    需求说明:后台提供功能,可以通过富文本编辑器[summernote]上传优酷的视频链接地址(这里需要注意:优酷视频提供多种操作方式 下面截图说明,先做个标记): 客户端是通过ionic开发的:而上传的 ...

  8. Android开发之ViewPager

    什么是ViewPager? ViewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用以实现左右滑动切换View的效果. 如果想向下兼容就必须要android-support-v ...

  9. js获得文件根目录

    function getRootPath(){ //获取当前网址,如: http://localhost:8083/proj/meun.jsp var curWwwPath = window.docu ...

  10. java经验总结二：ORA-08103: 对象不再存在

    问题发生的环境: 在springMvc+mybatis框架中,调用oracle的存储过程时,碰到的一个这样的异常: org.springframework.jdbc.UncategorizedSQLE ...