/*
*比如有两个页面a.html 和b.html
*我们要做的是在a.html里面的iframe里面引入b.html,b.html里面的实际内容高度有多少,a.html里面的iframe的高度就有多少,
*随着b.html里面的高度的变化 iframe的高度也在自适应的变化
*/
1.首先我们先来看a.html
<html>
<head>
<script type="text/javascript" src="....这里引入的我就不写了">
//这里我用jQuery来取得iframe的src
jQuery(document).ready(function(){
document.all.thisIframe.src = "b.html";
});
</script>
</head>
<body>
<!--这里我们不在iframe里面写src,我们要让被引入的html先进行编译,要不我们会得不到被引入html的高度,我们可以用js或者用jQuery写一个方法得到src
-->
<iframe height="100%" width="100%" scrolling="no" frameborder="0" name="thisIframe" id="thisIframe">
</iframe>
</body>
</html>
2.我们来看在b.html里面要加些什么
<html>
<head>
</head>
<!--请看好在body里面写了什么东西,下面的thisIframe代表iframe的id,下面的form1代表这个html的form的id 一般的我们引入的html都会有一个form,获得body的高度往往不准确,这里我们直接获取form的实际内容的高度 --->
<body onload="parent.window.document.all.thisIframe.height=document.form1.scrollHeight">
<form id="form1" action="">
<table>
</table>
</form>
</body>
</html>
3.往往这样的话我们就可以在a.html里面的主页面里面看到iframe的高度随着b.html里面的实际内容高度自适应的变化
分享到:
相关推荐
iframe高度自适应代码及演示页面。 适合新手,用到iframe,并且需要高度自适应的人士。 老手自动绕行,又没什么技术含量。。。 解压之后,打开iframe-auto.html之后查看效果. 如果不能查看,检查是否允许执行js
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
Iframe 高度自适应,js控制Iframe 高度自适应.docx
iframe包含的页面的高度,兼容性好,iframe高度自适应
iframe高度自适应.pdf
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题
根据iframe内容高度自适应。不能确保所有的地方都能通用,但是大部分地方都能适用。
NULL 博文链接:https://jxdwuao.iteye.com/blog/1243362
iframe自适应高度和宽度
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
纯JS实现的iframe自适应高度。兼容主流浏览器。
jsp页面iframe高度自适应的js代码.docx
用jquery实现iframe高度自适应实例代码完美兼容多数浏览器
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
文件为iframe高度自适应的代码demo,能够兼容常用浏览器,项目开发当中我常拿来用
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。
iframe高度自适应,多浏览器兼容 已测试过在ie6,7,8,firefox8,chrom15中通过