iframeの高さを動的に設定します。 ieとchromeで動作しません。

Question

javascriptとJqueryを使用してiframeの高さを動的に設定しようとしています。

しかし、これはIe8では機能しません。&クロム。 （しかし、それはファイヤーフォックスでうまく動作します）

何か助けてください？

おかげ

function resizePanel() { 
     window.console.log("ran the resize panel function"); 
    var frame = document.getElementsByTagName('iframe')[0]; 
    if(frame != null) { 

     var height;    
     if(self.innerHeight) { 
      window.console.log("ran the self.innerHeight"); 
      height= self.innerHeight;        
     } 
     else if (document.documentElement && (document.documentElement.clientHeight)) { 
      window.console.log("ran the clientHeight"); 
      height = document.documentElement.clientHeight;       
     } 
     else if(document.body) { 
      window.console.log("ran the document.body"); 
      height = document.body.clientHeight;    
     } 
     frame.style.height = height - 165 + 'px'   
    }}; 

    $(document).ready(function() { 
     resizePanel(); 
     $(window).resize(function() { 
      resizePanel(); 
     }); 
    }); 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(EndRequest); 

    function EndRequest(sender, args) { 
     resizePanel(); 
    } 

Answer 1

コードは、すべてのブラウザで1行を変更すると問題なく動作します。

代わりの

var frame = document.getElementsByTagName('iframe')[0]; 

使用

var frame = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_Options_iframe"); 

問題を使用してChromeとIEには隠されたIフレームを持っていると我々はgetElementsByTagNameのを使用する場合、それは私たちすべてのiframeの配列を返しました。そこで私たちは[0]インデックスにアクセスしようとしました、それは他のiframeを参照していました。

こちらがお役に立てば幸いです。

完全なコードは次のとおりです。

function resizePanel() { 

     var frame = document.getElementById("ctl00_ctl00_ContentPlaceHolder1_Options_iframe"); 
    if(frame != null) { 

     var height;    
     if(self.innerHeight) { 

      height= self.innerHeight;        
     } 
     else if (document.documentElement && (document.documentElement.clientHeight)) { 

      height = document.documentElement.clientHeight;      
     } 
     else if(document.body) { 

      height = document.body.clientHeight;    
     } 
     frame.style.height = height - 165 + 'px' 

    }}; 

    $(document).ready(function() { 
     resizePanel(); 
     $(window).resize(function() { 
      resizePanel(); 
     }); 
    }); 

    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(EndRequest); 

    function EndRequest(sender, args) { 
     resizePanel(); 
    } 

Answer 2

あなたのコードは、あなただけの次の操作を行う可能性が少し複雑なようだ：

function resizePanel() { 
    window.console.log("ran the resize panel function"); 
    var frame = document.getElementsByTagName('iframe')[0]; 
    if(frame != null) { 
     frame.style.height = frame.contentWindow.document.body.scrollHeight + "px"; 
    } 
} 

は、すべての主要なブラウザで動作するはずです。