蓝
HTML/CSS
阅读:4348
评论:0

IFRAME 根据内容改变自适应[IE FF 测试可用]

Calchas 发表于 2008, December 23, 1:51 PM

其他地方看见的，但是原来的在FF下有问题，我改过了。

a.html

 

 

XML/HTML代码
  1. <p><iframe id="Content" src="b.html" width="790" scrolling="no" frameborder="0" onload="this.height=window.frames[0].document.body.scrollHeight;this.width=window.frames[0].document.body.scrollWidth;"></iframe></p>  

b.html 里面的JS

HTML 代码省略了

 

JavaScript代码
  1. //自适应高度   
  2. function LoadPicking()   
  3. {   
  4. if(top.location != self.location)     
  5. {   
  6. var a = window.parent.frames[0];     
  7. a.height = document.body.scrollHeight;     
  8. }   
  9. }   
  10. window.onload = function(){LoadPicking();};   

 

 

原始代码

 

Parent.html

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Parent</title>  
  6. <script language="javascript">  
  7.     function resizeIframe(obj,objId){    
  8.        var docHeight = document.frames[objId].document.body.scrollHeight ;   
  9.        var docWidth =  document.frames[objId].document.body.scrollWidth;   
  10.        
  11.        obj.style.height = docHeight  + 'px';   
  12.         obj.style.width = docWidth   + 'px';   
  13.     }    
  14. </script>  
  15. </head>  
  16.   
  17. <body style="margin: 0;">  
  18. <table border="0" cellpadding="0" cellspacing="0" class="Table-BG-Line" height="100%">  
  19.   <tr valign="top">  
  20.     <td width="650px"><iframe name="Content" id="Content" scrolling="no" frameborder="0" width="650"    
  21. onload="this.height=Content.document.body.scrollHeight;this.width=Content.document.body.scrollWidth;"  
  22.  src="Child.htm"></iframe></td>  
  23.   </tr>  
  24. </table>  
  25. </body>  
  26. </html>  

 

Child.html

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>Child</title>  
  6. <script language="javascript">  
  7. function LoadPickingAdd()   
  8. {   
  9.     var objMethod = document.getElementById("ddlMethod");   
  10.     var objAddress = document.getElementById("trAddress");   
  11.     if (objMethod == null)   
  12.     {   
  13.         objAddress.style.display = "inline";   
  14.     }   
  15.     else   
  16.     {   
  17.         if (objMethod.selectedIndex == 0)   
  18.         {   
  19.             objAddress.style.display = "none";   
  20.         }   
  21.         else   
  22.         {   
  23.             objAddress.style.display = "inline";   
  24.         }           
  25.     }   
  26. }   
  27. function GetAddr()   
  28. {   
  29.     var objMethod = document.getElementById("ddlMethod");   
  30.     var objAddress = document.getElementById("trAddress");   
  31.     if (objMethod.selectedIndex == 0)   
  32.     {   
  33.         objAddress.style.display = "none";   
  34.     }   
  35.     else   
  36.     {   
  37.         objAddress.style.display = "inline";   
  38.         //以下代码实现自动调整子页面高度.   
  39.         if(top.location != self.location)     
  40.         {     
  41.           var a = window.parent.document.getElementsByName(self.name);     
  42.           a[0].height = document.body.scrollHeight;     
  43.         }   
  44.     }   
  45. }   
  46. </script>  
  47. </head>  
  48.   
  49. <body onload="LoadPickingAdd()" style=" margin:0">  
  50. <form id="form1" method="post" action="">  
  51. <p>  
  52.   <select name="ddlMethod" id="ddlMethod" onchange="GetAddr()">  
  53.     <option value="0">0</option>  
  54.     <option value="1">1</option>  
  55.   </select>  
  56. </p>  
  57. <p>  </p>  
  58. <table width="200" border="1" height="100%">  
  59.   <tr id="trAddress" style="display:inline">  
  60.     <td>a</td>  
  61.     <td> </td>  
  62.   </tr>  
  63.   <tr>  
  64.     <td>b</td>  
  65.     <td> </td>  
  66.   </tr>  
  67.   <tr>  
  68.     <td>c</td>  
  69.     <td> </td>  
  70.   </tr>  
  71.   
  72.   <tr>  
  73.     <td>d</td>  
  74.     <td> </td>  
  75.   </tr>  
  76.   <tr>  
  77.     <td>e</td>  
  78.     <td> </td>  
  79.   </tr>  
  80.   <tr>  
  81.     <td>f</td>  
  82.     <td> </td>  
  83.   </tr>  
  84. </table>  
  85. </form>  
  86. </body>  
  87. </html>  

« 上一篇 | 下一篇 »

标签: iframe
引用： 点击获得Trackback地址,Encode: UTF-8　点击获得Trackback地址,Encode: GB2312 or GBK　点击获得Trackback地址,Encode: BIG5
发表评论：( 你的参与是我最大的动力! )