iframe自适应

时间 2020-05-28

原文原文链接

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

a.htmlhtml

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

innerIframe.htmljava

  
  
  
  
   
   
   
   <!DOCTYPE html> 
   
   
   
   <html> 
   
   
   
   <head> 
   
   
   
       <meta charset="utf-8"> 
   
   
   
       <title></title> 
   
   
   
   </head> 
   
   
   
   <body> 
   
   
   
   <div class="inner"> 
   
   
   
       这里显示的是内容<br/> 
   
   
   
       <input type="button" class="add" value="add" dataType="hoder"/> 
   
   
   
       <input type="button" class="remove" value="remove" dataType="hoder"/> 
   
   
   
   </div> 
   
   
   
   <script type="text/javascript" src="../../common/js/jquery-1.7.1.min.js" language="javascript"></script> 
   
   
   
   <script type="text/javascript"> 
   
   
   
       var objIframe=parent.document.getElementById('iframe1'); 
   
   
   
       objIframe.style.height=($(document).height()+10)+"px"; 
   
   
   
       $(document).click(function ($e) { 
   
   
   
           var elem = $e.srcElement || $e.target; 
   
   
   
           while (elem) { 
   
   
   
               if (($(elem).attr("dataType") == "hoder")) { 
   
   
   
                   parent.document.getElementById('iframe1').style.height=($(document).height()+10)+"px"; 
   
   
   
               } 
   
   
   
               elemelem = elem.parentNode; 
   
   
   
           } 
   
   
   
       }); 
   
   
   
       $('.add').click(function () { 
   
   
   
           $('.inner').append("摄影师拍地铁撞死人被批见死不救 渔民捕1.2米鳡鱼叫卖<br/>"); 
   
   
   
       }); 
   
   
   
       $('.remove').click(function(){ 
   
   
   
           $('.inner').html("a"); 
   
   
   
       }); 
   
   
   
   </script> 
   
   
   
   </body> 
   
   
   
   </html>