A-A+

jquery实现iframe高度自适应代码

2016年01月07日前端设计暂无评论阅读 6 views 次

在前端中我们时常会碰到关于高度自适应这个问题，今天看到有一个站长分享了一段代码，可实现任何页面高度自适应哦，并且兼容性好而是代码简洁了，下面给大家列举一下。
废话不多说，直接上代码。

一、父窗口代码,代码如下:

<iframe id="_case" src="case.html" width="300" height="0" frameborder="0" scrolling="no" ></iframe>

二、子窗口代码,代码如下:

然后下面三个文档中相互调用自己我们就可以实现判断了哦。

case3.htm页面,代码如下:

<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<style>
.current{border:1px solid #999;}
</style>
<body style="background:#eeeeee;">
<div id="relation" style="padding-top:10px;" >
<ul>
<li>iframe高度自适应 - PHP日志</li>
<li>iframe高度自适应</li>
<li>iframe高度自适应 - PHP日志</li>
<li>iframe高度自适应</li>
<li>iframe高度自适应 - PHP日志</li>
<li>iframe高度自适应</li>
</ul>
<div style="margin-top:18px;"><a href='case1.html'>Page1</a> <a href='case2.html'>Page2</a> <span class='current'>Page3</span></div>
</div>
<script language="javascript">
$(document).ready(function() {
var h=$("#relation").height()+30;
$(window.parent.document).find("iframe[id='_case']").height(h);
});
</script>
</body>
</html>

cass1.htm文件,代码如下:

<div id="relation" style="padding-top:10px;" >
<ul>
<li>iframe高度自适应 - PHP日志</li>
<li>iframe高度自适应</li>
</ul>
<div style="margin-top:18px;"><span class='current'>Page1</span> <a href='case2.html'>Page2</a> <a href='case3.html'>Page3</a></div>
</div>
<script language="javascript">
$(document).ready(function() {
var h=$("#relation").height()+30;
$(window.parent.document).find("iframe[id='_case']").height(h);
});
</script>

cass2.htm文件,代码如下:

<div id="relation" style="padding-top:10px;" >
<ul>
<li>iframe高度自适应 - PHP日志</li>
<li>iframe高度自适应</li>
<li>iframe高度自适应 - PHP日志</li>
<li>iframe高度自适应</li>
</ul>
<div style="margin-top:18px;"><a href='case1.html'>Page1</a> <span class='current'>Page2</span> <a href='case3.html'>Page3</a></div>
</div>
<script language="javascript">
$(document).ready(function() {
var h=$("#relation").height()+30;
$(window.parent.document).find("iframe[id='_case']").height(h);
});
</script>

夏日博客