동적으로 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

코드는 모든 브라우저에서 한 줄을 변경하여 정상적으로 작동합니다. 대신

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

사용

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

문제를 사용

는 크롬과 IE가 iframe을 숨긴이었고, 우리는 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"; 
    } 
} 

모든 주요 브라우저에서 작동합니다.