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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。