다중 브라우저를 겸용하는 iframe 자체 적응 고도(ie8, 구글 브라우저4.0과 Firefox3.53)

작은 프로젝트 용리중학교 멀티미디어 교실 관리 시스템에서 백그라운드 관리를 iframe에 사용했다.내용을 동적으로 불러오기 때문에, iframe가 내용 페이지의 높이에 적응해야 합니다.구글로 많은 답을 검색했는데, 그중에 성공한 것은 이 코드였다.

 
  
 
  <br>function SetCwinHeight() { 
  <br>var iframeid = document.getElementById("maincontent1"); //iframe id 
  <br>if (document.getElementById) { 
  <br>if (iframeid && !window.opera) { 
  <br>if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) { 
  <br>iframeid.height = iframeid.contentDocument.body.offsetHeight; 
  <br>} else if (iframeid.Document && iframeid.Document.body.scrollHeight) { 
  <br>iframeid.height = iframeid.Document.body.scrollHeight; 
  <br>} 
  <br>} 
  <br>} 
  <br>} 
  <br> 
  
 
 

iframe 코드:

IE8에서 자체 적응 고도를 성공적으로 실현했지만 구글 브라우저의 높이는 증가할 뿐 줄어들지 않는다. 즉, 키가 크면 줄어들지 않는다는 것이다.
그러면 각 브라우저의 표현이 그다지 같지 않아서, 어떤 값을 취해도 맞지 않는다.그러나 브라우저를 호환할 수 있는 최대 두 개의 값을 얻는 법칙을 찾을 수 있다.그래서 우리의 메인 페이지 코드는 이렇게 바뀔 것이다.

 
  
function reinitIframe(){var iframe = document.getElementById("frame_content"); 
  
try{ 
  
var bHeight = iframe.contentWindow.document.body.scrollHeight; 
  
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; 
  
var height = Math.max(bHeight, dHeight); 
  
iframe.height = height; 
  
}catch (ex){} 
  
} 
  
window.setInterval("reinitIframe()", 200); 
  
 
 

이렇게 해서 호환성 문제가 기본적으로 해결되었다.참고로 절대 포지셔닝만 하는 층이 아니라 값에float도 두 값의 차이를 초래할 수 있다.
만약 데모를 보여준다면 IE를 제외한 다른 브라우저에서 층이 펼쳐진 후에 숨겼을 때, 찾은 높이 값은 숨겨진 진짜 값 184가 아니라 펼쳐진 높이 303을 유지했다. 즉, 높아진 후에 줄일 수 없다는 것이다.이 현상은 서로 다른 포함된 페이지 사이를 전환하는 데도 발생할 수 있다. 높은 페이지에서 낮은 페이지로 전환할 때 얻는 높이는 그 높은 값이다.
iframe 창의 높이가 문서의 실제 높이보다 높을 때 높이는 창의 높이이고 창의 높이가 실제 문서의 높이보다 낮을 때 문서의 실제 높이로 요약할 수 있다.따라서 높이를 동기화하기 전에 실제 문서보다 낮은 값으로 높이를 설정하는 방법을 강구해야 한다.그래서 iframe에 onload="this를 추가합니다.Height=100〃, 페이지를 불러올 때 충분한 높이로 축소한 다음에 같은 높이로 동기화합니다.
이 값은 실제 응용에서 충분하지만 너무 낮으면 안 된다. 그렇지 않으면 FF 등 브라우저에서 뚜렷하게 깜빡일 수 있다.DOM을 조작할 때 메인 페이지에서 감청할 수 없기 때문에 DOM을 조작한 후에 높이를 줄일 수 밖에 없다.
나의 실제 프로젝트에서 원가와 수익 사이를 따져보면 나는 이 일을 하지 않았다. 모든DOM 함수에 이 코드를 삽입해야 하기 때문에 대가가 너무 높고 사실 층을 축소해도 그렇게 치명적이지 않다.데모를 포함해서도 이 일을 하지 않았다.만약 독자에게 더 좋은 방법이 있다면 저에게 알려주세요.
***********************************원문 인용 종료*************************************/
빨간색이라는 이 구절에 주의하세요.여기까지 읽고 iframe을 바꾸고 싶습니다.Height 전에 iframe에게 먼저 주시겠습니까?Height는 iframe과 같은 아주 작은 초기 값을 부여합니다.height="10px", 그리고 iframe처럼 바꿉니다.height.이렇게 하면 원문의 빨간색 부분의 문제를 해결할 수 있다.
최종 코드는 다음과 같습니다.

 
  
 
  <br>function SetCwinHeight() { 
  <br>var iframeid = document.getElementById("maincontent1"); //iframe id 
  <br>iframeid.height = "10px";//         ,     . 
  <br>if (document.getElementById) { 
  <br>if (iframeid && !window.opera) { 
  <br>if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) { 
  <br>iframeid.height = iframeid.contentDocument.body.offsetHeight; 
  <br>} else if (iframeid.Document && iframeid.Document.body.scrollHeight) { 
  <br>iframeid.height = iframeid.Document.body.scrollHeight; 
  <br>} 
  <br>} 
  <br>} 
  <br>} 
  <br> 
  
 
 

iframe 코드는 그대로 유지됩니다.

테스트 결과, iframe는 i8, 구글 브라우저4.0, Firefox3.5.3 모두 고도에 적응하는 데 성공했다.