天天看點
傳回

跨域從子頁面設定父頁面iframe高度（前提，兩個域名下都有操作權限）

注：下面的方案可以使用，也可以用另外的一種方案來解決，就是postmessage，具體可以查相關資料了解

之前在論壇裡看到有個同學問關于跨域調整iframe高度的問題，正好之前解決過類似問題，鑒于此問題還是有一定的通用性，索性總結一下，記錄于此。

具體思路如下：

跨域從子頁面設定父頁面iframe高度（前提，兩個域名下都有操作權限）

父頁面域名為 ： www.a.com

IFRAME裡子頁面域名為 ： www.b.com

1.在父級頁面所在域名（www.a.com）下設定一個檔案，（用來設定IFRAME的高度）比如：http://www.a.com/setHeight.html

2.在子級頁面加載完畢後，計算目前頁面高度付給一個變量cheight，然後動态建立一個iframe，src是http://www.a.com/setHeight.html#cheight;

3.通過在setHeight.html頁面中parent.parent.document.getElementById('iframeid')來調整iframe的高度

4.解釋一下，在子頁面裡動态建立的iframe跟目前子頁面的父級頁面是同一個域名，這樣就不存在跨域問題了。

舉例：

         假設父頁面的域名是www.a.com，頁面名字是A.html；子頁面的域名是www.b.com，頁面名字是B.html

父頁面A.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 content="text/html; charset=gb2312" http-equiv="Content-Type">  
  5. </head>  
  6.     <body>  
  7.     <iframe height='200px' id='iframe1' src="http://www.b.com/B.html"></iframe>  
  8. </body>  
  9. </html>  

父級頁面所在域名下的用于調節iframe高度的頁面setHeight.html内容如下：

  7.         <div></div>  
  8.         <script type="text/javascript">  
  9.             window.onload = function()  
  10.             {  
  11.                 var b_iframe = parent.parent.document.getElementById("iframe1");  
  12.                 var hash_url = window.location.hash.split("#");  
  13.                 var hash_height = hash_url[1]+"px";  
  14.                 b_iframe.style.height = hash_height;  
  15.             }  
  16.         </script>  
  17.     </body>  

子頁面B.html内容如下：

​

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  6. <body style="background-color:#ccc">  
  7.     <div style="height:600px;">sdfsfsssfsfs</div>  
  8.     <script>  
  9.         window.onload = function()  
  10.         {  
  11.             var iframe = document.createElement("iframe");  
  12.             iframe.width='0px';  
  13.             iframe.height='0px';  
  14.             var currentheight = document.body.scrollHeight;  
  15.             iframe.src='http://www.a.com/setHeight.html#'+currentheight;  
  16.             document.body.appendChild(iframe);  
  17.         }  
  18.     </script>  

可見預設的iframe高度是200px,而iframe中B.html的實際高度至少為600px,當B.html加載完成時，會自動調整其父頁面iframe的高度

html 父頁面 xml 3c 動态建立
上一篇: Linux檔案及檔案目錄權限的設定
下一篇: linux下ftp 權限設定

繼續閱讀