내부 요소 높이가 잘못보고 된 iFrame

Google을 통해 쉽게 찾을 수있는 여러 가지 예제를 사용하여 내용 (PHP를 통해 동적으로 생성 됨)에 맞게 iframe의 크기를 조절하는 코드를 작성했습니다. 그것은 작동하지만 문제는 많은 검색에도 불구하고 해결책을 찾지 못합니다.내부 요소 높이가 잘못보고 된 iFrame

홈페이지 HTML

<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
    <script src=(JQuery URL)></script> 
    <script src=(External JS file URL, code detailed below)></script> 
</head> 
<body> 
    <div id="container"> 
    <iframe id="iframe" src=(url of source file) onload="resize()"></iframe> 
    </div> 
</body> 
</html>

iframe이 소스 HTML

<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div class="innerFrameDivs"> 
    <?php (dynamically generated content) ?> 
    </div> 
    <div class="innerFrameDivs"> 
    <?php (dynamically generated content) ?> 
    </div> 
</body> 
</html>

자바 스크립트

function resize() 
{ 
    var iframe = document.getElementById("iframe"); 
    var contentHeight = iframe.contentDocument.body.scrollHeight; 
    $('#iframe').css('height',contentHeight); 
}

CSS

#iframe { 
    display:block; 
    border:none; 
    height:auto; 
}

: 첫째, 여기에 관련 코드는

이 모든 경우 iframe은 콘텐츠 아래에 빈 공간이 남지 않는다는 점을 제외하고 콘텐츠에 맞게 크기가 조정됩니다.

iframe에서보고 된 scrollHeight가 실제로 내용의 높이보다 크기 때문에 요소의 높이를 내부에있는 것보다 더 크게 설정하면 이것이 존재할 것으로 예상됩니다. 하단에 빈 공간입니다.

더 자세히 조사한 결과 iframe은 요소의 실제 높이가 실제보다 큰 것으로보고 함을 발견했습니다.

$('#iframe').contents().find('.innerFrameDivs').each(function(){ 
    var height = $(this).css('height'); 
    alert(height); 
});

이가 iframe을의 소스 페이지는 기본적으로 자신의 브라우저 탭에서 열립니다에서 JS :

$(document).find('.innerFrameDivs').each(function(){ 
    var height = $(this).css('height'); 
    alert(height); 
});

그리고 요소에도 불구하고 즉, 나는이 iframe이있는 페이지에 JS 실행 같은 CSS로 다른 높이가보고되었습니다. 예를 들어, iframe 소스 페이지가 브라우저 탭에서 기본적으로 열릴 때 iframe 소스 페이지가 최상위 div의 높이를 207으로보고 하단 div의 높이를 785로보고하는 동안 iframe의 높이를 241, 하단 div의 높이를 901로보고합니다

그래서 iframe이 내부 요소의 높이를 팽창시키고 있으며, 따라서 scrollHeight를 어떤 이유로 든 팽창시킵니다. 이유는 알 수 없습니다. scrollHeight의 90 %를 차지하는 비율을 iframe 높이로 사용하는 것을 생각했지만 내부 div의 내용이 동적으로 생성되기 때문에 높이가 크게 달라져서 제대로 작동하지 않습니다. .

'display : block'및 'height : auto'를 iframe 용 CSS에 넣었으므로 다른 토론에서이 규칙이이 문제를 해결하는 데 도움이 될 수 있음을 알았으므로 아무 것도하지 않았습니다.

이 문제는 모든 브라우저에서 발생하지만 Chrome과 Safari에서는 Firefox보다 (웹킷은 일반적으로 Mozilla보다 큰 높이를 측정하기 때문에)이 문제는 더 극적입니다.

이 문제의 원인 및/또는 해결 방법을 아는 사람이 있습니까?

출처

2017-12-16 namkcuR

여러 순간의 높이를 측정하고 결과를 비교하면 도움이 될 수 있습니다. 설정된 지연없이 'window.load'의'setTimeout' 내에 코드를 실행하는 더 정확한 결과를 얻으실 수 있습니다. 이렇게하면'window.load'에 바인딩 된 모든 것이 실행 된 후에 코드가 실행되도록하여 정확한 높이를 얻을 수있는 가능성을 크게 높입니다. 나는 당신이 두 개의 문서를 다루고 있고 각각이 그것의 자신의 특정한'window.load' 이벤트를 가지고 있다는 것을 알고 있다고 가정합니다. Afaik, iframe의 '로드'가 먼저 발생합니다 (주 문서가 다른 문서를 기다리고 있기 때문에 자체 호출). –

제안을 감사하지만이 것을 시도해도 아무 것도 바뀌지 않습니다. 나는 그것을 알아 냈다 - 추가 된 수평 스크롤바 높이였다. – namkcuR

그래서 알아 냈습니다. 나는 iframe의 너비를 자바 스크립트에서 100 %로 설정했지만 요소 높이를 얻은 후에야 그 높이가 검색되면 가로 스크롤바가있는 요소에서 검색되고 있다는 사실을 간과했습니다. 여분의 높이가왔다. JS가 아닌 CSS에서 iframe의 너비를 100 %로 설정하면 문제가 해결됩니다.

항상 벽에 머리를 몇 시간 동안 두드리면 아주 분명합니다.

출처

2017-12-16 19:24:15 namkcuR

내부 요소 높이가 잘못보고 된 iFrame

답변

관련 문제