도메인 간 상황에서 iframe 높이 적응형 사용 가능한 방법을 설정하는 방법_javascript 기술

페이지에서 iframe을 사용하여 페이지 콘텐츠를 동적으로 로드하는 것은 웹 개발에서 일반적인 방법입니다. 상위 페이지에 스크롤 막대가 없는 iframe을 지정한 다음 src 속성에 로드 가능한 페이지를 지정하면 상위 페이지에 액세스할 때 하위 페이지가 자동으로 로드될 수 있습니다. 서브페이지의 실제 높이에 따라 iframe의 높이를 조정해야 합니다. iframe의 높이가 서브페이지의 실제 높이보다 작으면 초과된 부분을 표시할 수 없습니다. 반대로 iframe의 높이가 너무 높으면 페이지에 많은 양의 공백이 나타납니다. 속성이나 CSS를 통해 iframe의 높이를 설정할 수 있습니다. 하위 페이지 콘텐츠의 높이가 확실하지 않은 경우 스크립트를 통해 동적으로 지정할 수도 있습니다. 하지만 하위 페이지가 동일한 도메인에 없으면 어떻게 되나요? 현재 스크립트는 하위 페이지의 높이를 얻을 수 있는 방법이 없으며 JavaScript 크로스 도메인 문제가 있습니다!

제목에서 언급했듯이, 이 글에서는 사용 가능한 방법을 소개하면서 아래 나열된 방법 외에 다른 방법이 있는지 모두에게 묻습니다.

속성이나 CSS를 통해 iframe 높이를 설정하는 방법은 여기서 자세히 소개하지 않습니다. 먼저 스크립트를 통해 설정하는 방법을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

function ChangeFrameHeight(id) {
var count = 1;

(function() {
var frm = document.getElementById(id);
var subWeb = document.frames ? document.frames[id].document : frm. contentDocument;

if (subWeb != null) {
var height = Math.max(subWeb.body.scrollHeight, subWeb.documentElement.scrollHeight)
frm.height = height; >}
if (count < 3) {
count = count
window.setTimeout(arguments.callee, 2000)
}
})(); }


iframe 하위 페이지와 상위 페이지가 모두 동일한 도메인에 있다고 가정하면 이 스크립트는 지정된 ID에 대한 iframe 높이를 동적으로 조정할 수 있습니다. 상위 페이지가 하위 페이지보다 먼저 로드되는 것을 방지하기 위해 이 기능은 2초마다 총 3회 재실행됩니다. 극단적인 경우 하위 페이지의 로딩 속도가 상위 페이지의 로딩 속도보다 느려지므로 실행 횟수와 시간을 적절하게 조정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

< /iframe>

하위 페이지에서 도메인 간 문제가 발생하는 경우 HTML5 postMessage를 사용하여 이를 달성할 수 있지만 전제는 하위 페이지가 상위 페이지에 적극적으로 정보를 보내야 한다는 것입니다. 페이지. 하위 페이지 부분은 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

게시물을 받으셨나요?

여기에는 iframe 내부에 포함될 많은 내용이 있습니다.

< /body>
< ;/html>


상위 페이지의 하위 페이지에서 전달된 정보를 가져온 다음 iframe의 높이를 조정합니다.

코드 복사 코드는 다음과 같습니다.

>



HTML5의 postMessage() 메소드 사용 방법에 대한 자세한 내용은 http://dev.w3.org/html5/postmsg/#web-messaging 기사를 참조하세요.

그러나 대부분의 경우 iframe 참조된 서브페이지가 상위 페이지와 동일한 도메인에 있지 않다는 사실 외에도 서브페이지에서 어떤 작업도 수행할 수 없거나 서브페이지가 Corss 문서 메시징 기능을 제공하지 않을 수도 있습니다. 모두. 이 경우 postMessage() 메서드를 통해 해당 서브페이지에 대한 정보를 얻을 수 없습니다. 하위 페이지와 상호 작용할 방법이 없기 때문에 하위 페이지의 문서 개체를 알 수 있는 방법이 없습니다. 하위 페이지의 실제 높이를 기준으로 상위 페이지 iframe의 높이 속성을 조정할 수 없습니다.

현재 위의 문제를 해결할 수 있는 실용적이고 효과적인 방법은 없습니다. 기본적으로 iframe의 높이를 비교적 크게 지정할 수 있습니다. 이렇게 하면 참조된 서브페이지의 콘텐츠가 범위를 초과하지 않는다고 가정할 때, 페이지에 약간의 공백을 남겨두는 것 외에는 기본적으로 콘텐츠를 표시하는 데 문제가 없습니다. 페이지.

다른 더 효과적인 솔루션이 있나요? 예상하다!