子页面内容发生变化时，修改iframe的高度，使其自适应

a.html

 


  
  1. <iframe src="innerIframe.html" width="100%" id="iframe1" style="height: 300px;border: none;" name="iframe1"></iframe> 
 
  
innerIframe.html
 
  

  
  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="utf-8"> 
  5.     <title></title> 
  6. </head> 
  7. <body> 
  8. <div class="inner"> 
  9.     这里显示的是内容<br/> 
  10.     <input type="button" class="add" value="add" dataType="hoder"/> 
  11.     <input type="button" class="remove" value="remove" dataType="hoder"/> 
  12. </div> 
  13. <script type="text/javascript" src="../../common/js/jquery-1.7.1.min.js" language="javascript"></script> 
  14. <script type="text/javascript"> 
  15.     var objIframe=parent.document.getElementById('iframe1'); 
  16.     objIframe.style.height=($(document).height()+10)+"px"; 
  17.     $(document).click(function ($e) { 
  18.         var elem = $e.srcElement || $e.target; 
  19.         while (elem) { 
  20.             if (($(elem).attr("dataType") == "hoder")) { 
  21.                 parent.document.getElementById('iframe1').style.height=($(document).height()+10)+"px"; 
  22.             } 
  23.             elemelem = elem.parentNode; 
  24.         } 
  25.     }); 
  26.     $('.add').click(function () { 
  27.         $('.inner').append("摄影师拍地铁撞死人被批见死不救 渔民捕1.2米鳡鱼叫卖<br/>"); 
  28.     }); 
  29.     $('.remove').click(function(){ 
  30.         $('.inner').html("a"); 
  31.     }); 
  32. </script> 
  33. </body> 
  34. </html>