iframe自动适应加载页面高度

<html>    
    <head>    
       <meta  http-equiv=’Content-Type’  content=’text/html;  charset=gb2312’>    
   <meta  name=’author’  content=’吕海鹏//www.DeepTeach.com’>    
       <title>iframe自适应加载的页面高度</title>    
    </head>    
       
    <body>  

    <!-- 加载网页 开始-->  

        <iframe src="2.htm" frameBorder="0" scrolling="no" width="100%" ></iframe>  

    <!-- 加载网页 结束-->  

    </body>  
</html> 



iframe调用页 2.htm 代码如下: 

<html>    
<head>    
   <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>    
   <meta  name='author'  content='吕海鹏//www.DeepTeach.com'>    
   <title>iframe  自适应其加载的网页(多浏览器兼容)</title>    
   <script  language=javascript>  
   function iframeAutoFit()  
   {  
      try  
      {  
         if(window!=parent)  
         {  
          var a = parent.document.getElementsByTagName("IFRAME");  
            for(var i=0; i<a.length; i++) //www.deepteach.com  
            {  
               if(a[i].contentWindow==window)  
               {  
                   var h = document.body.scrollHeight;  
                   if(document.all) {h += 4;}  
                   if(window.opera) {h += 1;}  
                   a[i].style.height = h;  
               }  
            }  
         }  
      }  
      catch (ex)  
      {  
         alert("脚本无法跨域操作!");  
      }  
   }  
   if(document.attachEvent)  window.attachEvent("onload",  iframeAutoFit);    
   else  window.addEventListener(’load’,  iframeAutoFit,  false);    
   </script>
    
</head>    
<body>    
<!-- 在body内添加内容自动适应其加载的网页 开始-->  
   <div  style="  100%;  height:  400;  background-color:  #99CCFF">    
       iframe  自适应其加载的网页(多浏览器兼容)    
   </div>    
<!-- 在body内添加内容自动适应其加载的网页 结束-->  
</body>    
</html> 

//成功一定有方法,失败一定有原因。
原文地址:https://www.cnblogs.com/webapi/p/2698578.html