iframe同域または異域での高度自動適応(互換ブラウザ)

28579 ワード
javascriptを利用してiframeの高度自動適応を制御して、javascriptの異なるドメイン名に対する権限の制限を介在して、二つの状況に分けます.
ドメイン名と同じ場合:
ドメイン名の下で、iframeは自動的に高度に適応します.比較的簡単です.下のコードはすべてのブラウザに対応します.

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 
   
   
   
   
  3. <head>
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. 
   
   
   
   
  5. <title>iframe      </title>
    6. 
   
   
   
   
  6. <script type="text/javascript">
    7. 
   
   
   
   
  7. <!--//
    8. 
   
   
   
   
  8. function sizeFrame() {
    9. 
   
   
   
   
  9.     var F = document.getElementById("myFrame");
    10. 
   
   
   
   
  10.     if(F.contentDocument) {
    11. 
   
   
   
   
  11.         F.height = F.contentDocument.documentElement.scrollHeight; //FF 3.0.11, Opera 9.63, and Chrome
    12. 
   
   
   
   
  12.     } else {
    13. 
   
   
   
   
  13.         F.height = F.contentWindow.document.body.scrollHeight; //IE6, IE7 and Chrome
    14. 
   
   
   
   
  14.     }
    15. 
   
   
   
   
  15. }
    16. 
   
   
   
   
  16. window.onload=sizeFrame;
    17. 
   
   
   
   
  17. //-->
    18. 
   
   
   
   
  18. </script>
    19. 
   
   
   
   
  19. </head>
    20. 
   
   
   
   
  20. <body>
    21. 
   
   
   
   
  21. <iframe width="100%" id="myFrame" src="http://www.a.com" scrolling="no" frameborder="0">    </iframe>
    22. 
   
   
   
   
  22. </body>
    23. 
   
   
   
   
  23. </html>
    24.
異域の場合:
メールがあると仮定して、サーバーA上にロードすべきページtestがあります.サーバーB上にあります.iframeを利用してtestをロードします.iframeの高さは自動的に拡張されます.仲介ページを使うことができます.
方法:
Bサーバー上のページtest.を利用して、iframeを隠してz.をロードして、test.htmlページで自分のページの高さを計算して、z)のhash=z.を割り当てます.zhi(計算された高さ)をロードする時、hashを取得して、main.の中でiframeの高さを設定します.無駄話は言わないで、直接下のコードを見てください.
メイン.

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 
   
   
   
   
  3. <head>
    4. 
   
   
   
   
  4. <script type="text/javascript">
    5. 
   
   
   
   
  5. <!--//
    6. 
   
   
   
   
  6. function sizeFrame() {
    7. 
   
   
   
   
  7.     var F = document.getElementById("iframeB");
    8. 
   
   
   
   
  8.     if(F.contentDocument) {
    9. 
   
   
   
   
  9.         F.height = F.contentDocument.documentElement.scrollHeight; //FF 3.0.11, Opera 9.63, and Chrome
    10. 
   
   
   
   
  10.     } else {
    11. 
   
   
   
   
  11.         F.height = F.contentWindow.document.body.scrollHeight; //IE6, IE7 and Chrome
    12. 
   
   
   
   
  12.     }
    13. 
   
   
   
   
  13. }
    14. 
   
   
   
   
  14. window.onload=sizeFrame;
    15. 
   
   
   
   
  15. //-->
    16. 
   
   
   
   
  16. </script>
    17. 
   
   
   
   
  17. </head>
    18. 
   
   
   
   
  18. <body>
    19. 
   
   
   
   
  19. <iframe id="iframeB"  name="iframeB" src="http://www.b.com/test.html" width="100%" height="auto" scrolling="no" frameborder="0"></iframe>
    20. 
   
   
   
   
  20. </body>
    21. 
   
   
   
   
  21. </html>
    22. 
   
   
   
   
  22.  
    23.
test.ページに追加するコードは以下の通りです.

  
  
  
  
    
   
   
   
   
  1. <iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe>
    2. 
   
   
   
   
  2. <script type="text/javascript">
    3. 
   
   
   
   
  3. function sethash(){
    4. 
   
   
   
   
  4.     hashH = document.documentElement.scrollHeight; //      
    5. 
   
   
   
   
  5.     urlC = "http://www.a.com/z.html"; //  iframeA src
    6. 
   
   
   
   
  6.     document.getElementById("iframeA").src=urlC+"#"+hashH; //         
    7. 
   
   
   
   
  7. }
    8. 
   
   
   
   
  8. window.onload=sethash;
    9. 
   
   
   
   
  9. </script>
    10.
仲介ページz.コード:

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 
   
   
   
   
  3. <head>
    4. 
   
   
   
   
  4. <script type="text/javascript">
    5. 
   
   
   
   
  5. function  pseth() {
    6. 
   
   
   
   
  6.     var iObj = parent.parent.document.getElementById('iframeB');//A main  ，        
    7. 
   
   
   
   
  7.     iObjH = parent.parent.frames["iframeB"].frames["iframeA"].location.hash;//     location    hash 
    8. 
   
   
   
   
  8.     iObj.style.height = iObjH.split("#")[1]+"px";//  dom
    9. 
   
   
   
   
  9. }
    10. 
   
   
   
   
  10. pseth();
    11. 
   
   
   
   
  11. </script>
    12. 
   
   
   
   
  12. </head>
    13. 
   
   
   
   
  13. <body>
    14. 
   
   
   
   
  14. </body>
    15. 
   
   
   
   
  15. </html>
    16.
デモを見る
転載:http://www.cnf2e.com/javascript/iframe-auto-height.html
JavaScript文字列の属性と方法