ifream依据嵌入页的大小自动调整自身大小 _Web前端

ifream根据嵌入页的大小自动调整自身大小
母页
<iframe id="iframe1" src="Edit2.html" marginheight="0" marginwidth="0" frameborder="no"></iframe>

子页

<script type="text/javascript">
    function IFrameAutoFit()
    {
     try
     {
      if(window!=parent)
      {
       var a = parent.document.getElementsByTagName("IFRAME");
       for(var i=0; i<a.length; i++)
       {
        if(a[i].contentWindow == window)
        {
         var h1=0, h2=0;
         var w1=0,w2=0;
         a[i].parentNode.style.height = a[i].offsetHeight +"px";
         a[i].style.height = "10px";
         if(document.documentElement && document.documentElement.scrollHeight)
         {
          h1 = document.documentElement.scrollHeight;
         }
         if(document.documentElement && document.documentElement.scrollWidth)
         {
          w1 = document.documentElement.scrollWidth;
         }
         if(document.body)
         {
          h2=document.body.scrollHeight;
         }
         if(document.body)
         {
          w2=document.body.scrollWidth;
         }
         var h = Math.max(h1, h2);
         var w = Math.max(w1,w2);
         if(document.all)
         {
          h+=5;
          w+=5;

         }
         if(window.opera)
         {
          h+=10;
          w+=10;
         }
         a[i].style.height = a[i].parentNode.style.height = h +"px";
         a[i].style.width = a[i].parentNode.style.width = w +"px";
        }
       }
      }
     }
     catch (ex)
     {
     }
    }
    if(window.attachEvent)
    {
     window.attachEvent("onload", IFrameAutoFit);
    }
    else if(window.addEventListener)
    {
     window.addEventListener('load', IFrameAutoFit, false);
    }
     </script>
<table bgcolor="Beige">
    <tr><td><input type="button" id="sd" value="button" onclick="alert('test')"></td></tr>
   </table>
上面一种方法需要在每一个子页都引用一段相同的代码，不是很方便。另一种方式

----------------------------------
A页

   <div style="border:1px dotted;width:400px">
    <iframe id="frame_content" src="iframe_b.htm" scrolling="no" frameborder="0" onload="this.height=100"></iframe>
   </div>
   <div><button onclick="checkHeight()">Check Height</button></div>
   <script type="text/javascript">
    function reinitIframe(){
     var iframe = document.getElementById("frame_content");
     try{
      var bHeight = iframe.contentWindow.document.body.scrollHeight;
      var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
      var height = Math.max(bHeight, dHeight);
      iframe.height = height;
     }catch (ex){}
    }
    window.setInterval("reinitIframe()", 200);

    function checkHeight() {
     var iframe = document.getElementById("frame_content");
     var bHeight = iframe.contentWindow.document.body.scrollHeight;
     var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
     alert("bHeight:" + bHeight + ", dHeight:" + dHeight);
    }
   </script>
B页

   <style type="text/css">
    body {margin:0;padding:0}
   </style>
   <script type="text/javascript">
    function toggleOverlay() {
     var overlay = document.getElementById('overlay');
     overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';
    }

   </script>
   <div>
    <a href="iframe_c.htm">go to page c</a>
    <button onclick="toggleOverlay()">Toggle Overlay</button>
   </div>
   <div style="height:160px;border:1px solid;position:relative">
    <div id="overlay" style="position:absolute;background:green;width:280px;height:280px;display:none;"></div>
   </div>
   
C页

   <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
   <title>c</title>
   <style type="text/css">
    body {margin:0;padding:0}
   </style>
   <div><a href="iframe_b.html">go to page b</a></div>
   <div style="height:600px;border:1px solid;"></div>