A-A+

jquery实现iframe高度自适应代码

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

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

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

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

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

  1. <div id="relation" style="padding-top:10px;" >  
  2. 文字内容  
  3. </div>  
  4. <script src="/jquery.min.js"></script>  
  5. <script language="javascript">  
  6. $(document).ready(function() {  
  7.  var h=$("#relation").height()+30;  
  8.  $(window.parent.document).find("iframe[id='_case']").height(h);  
  9. });  
  10. </script>  

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

case3.htm页面,代码如下:

  1. <script language="JavaScript" type="text/javascript" src="jquery.js"></script>  
  2.   
  3. <style>  
  4. .current{border:1px solid #999;}  
  5. </style>  
  6. <body style="background:#eeeeee;">  
  7. <div id="relation" style="padding-top:10px;" >  
  8. <ul>  
  9. <li>iframe高度自适应 - PHP日志</li>  
  10. <li>iframe高度自适应</li>  
  11. <li>iframe高度自适应 - PHP日志</li>  
  12. <li>iframe高度自适应</li>  
  13. <li>iframe高度自适应 - PHP日志</li>  
  14. <li>iframe高度自适应</li>  
  15. </ul>  
  16. <div style="margin-top:18px;"><a href='case1.html'>Page1</a> <a href='case2.html'>Page2</a> <span class='current'>Page3</span></div>  
  17. </div>  
  18.   
  19. <script language="javascript">  
  20. $(document).ready(function() {  
  21.  var h=$("#relation").height()+30;  
  22.  $(window.parent.document).find("iframe[id='_case']").height(h);  
  23. });  
  24. </script>  
  25. </body>  
  26. </html>  

cass1.htm文件,代码如下:

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

cass2.htm文件,代码如下:

  1. <div id="relation" style="padding-top:10px;" >  
  2. <ul>  
  3. <li>iframe高度自适应 - PHP日志</li>  
  4. <li>iframe高度自适应</li>  
  5. <li>iframe高度自适应 - PHP日志</li>  
  6. <li>iframe高度自适应</li>  
  7. </ul>  
  8. <div style="margin-top:18px;"><a href='case1.html'>Page1</a> <span class='current'>Page2</span> <a href='case3.html'>Page3</a></div>  
  9. </div>  
  10.   
  11. <script language="javascript">  
  12. $(document).ready(function() {  
  13.  var h=$("#relation").height()+30;  
  14.  $(window.parent.document).find("iframe[id='_case']").height(h);  
  15. });  
  16. </script>  
标签:

给我留言