1. 홈
  2. 질의 응답
  3. 크로스 브라우저 iframe 높이 계산

크로스 브라우저 iframe 높이 계산

2008-10-16 3 views
16

내 자바 스크립트 환경에서 가장 어려운 문제 중 하나는 iframe 높이가 인 올바른 (즉, 크로스 브라우저) 컴퓨팅입니다. 내 응용 프로그램에서 나는 동적으로 생성 된 iframe이 많아서로드 이벤트의 끝에서 높이와 너비를 조정하기 위해 일종의 자동 크기 지정을 수행하기를 원합니다.크로스 브라우저 iframe 높이 계산

function getDocumentHeight(doc) { 
    var mdoc = doc || document; 
    if (mdoc.compatMode=='CSS1Compat') {  
     return mdoc.body.offsetHeight; 
    } 
    else { 
    if ($.browser.msie) 
     return mdoc.body.scrollHeight; 
    else 
     return Math.max($(mdoc).height(), $(mdoc.body).height()); 
    } 
}

내가 성공하지 않고 인터넷을 검색 : 내 최고의 솔루션을 계산 높이의 경우

이 (가) (jQuery를의 도움으로) 다음이다. 나는 또한 문서 및 뷰포트 차원에 대한 몇 가지 방법이있는 Yahoo 라이브러리를 테스트했지만 만족스럽지 않습니다. 내 솔루션은 적절하게 작동하지만 때때로 키가 더 큰 높이를 계산합니다. 나는 공부와 파이어 폭스/IE/Safari에서 문서의 높이에 대한 속성의 톤 테스트 한 : documentElement.clientHeight, documentElement.offsetHeight, documentElement.scrollHeight, body.offsetHeight, body.scrollHeight, ... 는 또한 jQuery를이

$(document.body).height(), $('html', doc).height(), $(window).height() 내가 전화 통화 위의 함수에서뿐만 아니라, 다양한 브라우저에서 일관된 동작을하지 않습니다 로드 이벤트의 끝뿐만 아니라 동적으로 삽입 된 DOM 요소 또는 숨겨진 요소 또는 요소의 경우에도 마찬가지입니다. 로드 이벤트에서만 작동하는 코드가 종종 손상되는 경우입니다.

누군가가 진짜 크로스 브라우저 (Firefox/IE/Safari 이상) 솔루션을 가지고 있습니까? 몇 가지 힌트 또는 힌트?

출처

2008-10-16 Pier Luigi

+0

지금이 문제를 해결하기 위해 노력하고 있습니다. 해결책을 찾았습니까? – Shakakai

답변

4

저는 솔루션을 좋아하지만 IFRAME이 가치가있는 것보다 더 많은 문제를 발견했습니다.

왜? 1. 크기 문제. 2. iframe에는 걱정할 src 속성이 있습니다. 즉 절대 경로. 3. 페이지의 복잡성.

내 솔루션 - AJAX 호출을 통해 동적으로로드되는 DIV. DIV는 자동 크기가됩니다. AJAX 코드는 프레임 워크를 통해 수행 할 수있는 자바 스크립트 작업을 필요로하지만 사이트 위치와 관련이 있습니다. 3 세척, 당신은 자바 스크립트까지 페이지의 복잡성을 거래하고 있습니다. 대신 < IFRAME의

... > 사용 < DIV의 ID = "mystuff에"/ >

는 데이터로하여 mystuff DIV를 작성하고 그것에 대해 브라우저 걱정을하게하는 아약스 호출을 수행.

출처

2008-10-16 12:20:35 jim

+1

DIV 가능성을 고려해 봤지만 DOM 요소의 ID에 대한 쉬운 해결책을 모릅니다. 동일한 네임 스페이스를 공유하고 DIV에 ID 충돌이 많습니다. 같은 시간에 많은 iframe이 열렸다고 생각해보십시오. 그럼에도 불구하고 귀하의 솔루션은 신중하게 고려해야 할 가치가 있습니다. –

+2

외부 사이트의 컨텐츠를 AJAX로로드 할 수 없습니다. 브라우저 보안 위반 (교차 사이트 스크립팅)입니다. 은 외부 콘텐츠로드를 허용하는 유일한 클라이언트 측 솔루션 일 가능성이 큽니다. – artur

+0

@artur AJAJ는 어떻습니까? – Knu

0

다음은 작동하는 해결책입니다. 기본적으로 scrollHeight는 대부분의 경우 올바른 값입니다. 그러나 IE (특히 6과 7)에서 내용이 단순히 텍스트 노드에 포함되어 있으면 높이가 계산되지 않고 기본값 인 CSS 또는 iframe의 "height"특성에 설정된 높이가 기본값으로 사용됩니다. 이것은 시행 착오를 통해 발견되었으므로 가치있는 것을 위해 가져 가십시오.

function getDocumentHeight(doc) { 
    var mdoc = doc || document; 
    var docHeight = mdoc.body.scrollHeight; 

    if ($.browser.msie) { 
     // IE 6/7 don't report body height correctly. 
     // Instead, insert a temporary div containing the contents. 

     var child = $("<div>" + mdoc.body.innerHTML + "</div>", mdoc); 
     $("body", mdoc).prepend(child); 
     docHeight = child.height(); 
     child.remove(); 
    } 

    return docHeight; 
}

출처

2009-04-14 21:23:39

0

이 해결책은 6+, ff 3.5+, 사파리 4+에서 작동하는 것으로 나타났습니다. 나는 문서에 iframe을 만들고 추가하고있다. 다음 코드는 다른 dom 조작 이후에 jQuery의로드 이벤트가 끝날 때 실행됩니다. 로드 이벤트에서 발생하는 추가 돔 조작으로 인해 제한 시간이 필요합니다.

// sizing - slight delay for good scrollheight 
setTimeout(function() { 
    var intContentHeight = objContentDoc.body.scrollHeight; 
    var $wrap = $("#divContentWrapper", objContentFrameDoc); 
    var intMaxHeight = getMaxLayeredContentHeight($wrap); 
    $this.height(intContentHeight > intMaxHeight ? intMaxHeight : intContentHeight); 

    // animate 
    fireLayeredContentAnimation($wrap); 
}, 100);

은 내가 getMaxLayeredContentHeight 호출이 나를 위해 확인 무엇 인 고려해야 할 몇 가지 크기의 제약이있다. 희망이 도움이됩니다.

출처

2009-08-14 19:16:03

1

예를 들어 안에있는 IFRAME은 문서 자체의 높이가 아니라 문서의 높이를 알고 있다고 생각합니다. 또한, 이는 콘텐츠가 귀하의 웹 사이트에서오고 그 콘텐츠를 제어 할 수 있음을 의미합니다.

그렇다면 단순히 콘텐츠 주위에 DIV를 배치 한 다음 해당 DIV의 clientHeight를 사용하는 것이 어떻습니까?

코드 당신은 당신의 IFRAME에로드 :

이 
... 
<body> 
    <div id="content"> 
    ... 
    </div> 
</body>

부모 문서 :

function getDocumentHeight(mdoc) { 
    return mdoc.getElementById("content").clientHeight; 
}

BTW, 귀하의 예제 기능의이 부분은 "문서"로 이해가되지 않습니다를 참조하지 않습니다 IFRAME : var mdoc = doc || document;

출처

2011-04-02 12:34:44

2

이것은 잠시 동안 답변이 없으므로 약간의 연구를 마치고 나간 끝에 해결 방법을 제공하고자했습니다. 이 크로스 브라우저 및 크로스 도메인 (예 : 다른 도메인의 내용에 iframe이 포인트는 경우)

나는 다양한 방법을 사용하여 이전 버전의 브라우저와 호환 만드는 jQuery pluging에 싸여 메커니즘을 통과하는 HTML5의 메시지를 사용하여 종료 (일부는이 스레드에서 설명).

최종 솔루션은 매우 간단합니다. iframe이 페이지에서

// executes when a message is received from the iframe, to adjust 
// the iframe's height 
    $.receiveMessage(
     function(event){ 
      $('my_iframe').css({ 
       height: event.data 
      }); 
    }); 

// Please note this function could also verify event.origin and other security-related checks.

: 호스트 (상위) 페이지에서

내가 크롬 13 세 이상에서이 작업을 테스트 한

$(function(){ 

    // Sends a message to the parent window to tell it the height of the 
    // iframe's body 

    var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined); 

    $.postMessage(
     $('body').outerHeight(true) + 'px', 
     '*', 
     target 
    ); 

});

, 파이어 폭스 3.6 이상, IE7 XP와 W7에서 8과 9, OSX와 W7에서 사파리. ;)

출처

2011-11-30 22:10:38 SuitedSloth

관련 문제

 관련 문제