iframe을 다시로드하지 않고 iframe 높이를 감지합니다.

Question

웹 프로젝트에서 iframe을 가지고 있습니다. 하나의 그래프와 그래프의 값을 유지하는 테이블을 가지고 있습니다. (graph = google graph api, table = datatables)

HTML을 다시로드하지 않고 ifs 콘텐츠 높이가 js 응용 프로그램에 따라 변경되는 경우가 있습니다.

그래서 js의 변경 사항을 감지하고 i- 프레임 크기를 늘려야합니다.

어떻게 변경 사항을 감지 할 수 있습니까?

i- 프레임 크기를 늘리는 기능은 다음과 같습니다. (참고로)

function update_height() {   
      $('#iframe-1').load(function() { 
      var $ifbody = $(this).contents().find('body'); 
      $ifbody.css('height','auto'); 
      $(this).height($ifbody.height()); 
    }); 
    }; 

Answer 1

iframe이가 내 페이지와 iframe이의 SRC가 같은 기원 (동일 출처 정책)에서 있어야로 제공되는 페이지입니다. 이 경우 자바 스크립트는 한 페이지에서 다른 페이지 (postMessage 또는 HashChange를 통해)로 대화하거나 Windows 부모 창에 직접 액세스하고 iframe의 크기를 조절할 수 있습니다.

iframe 내에서 주 문서의 iframe에 액세스하십시오.

function updateHeight(newHeight){ 
    parent.document.getElementById("iframe").style.height=newHeight+"px"; 
} 

Answer 2

그것은 당신이 jQuery를 사용하고있는 것 같다 초기로드를 들어, iframe이 도메인 및 프로토콜 일치하는만큼 트릭을 할해야

$('#iframe-1').load(function(){ 
    $(this).height($(this).contents().find('body').height()); 
}); 

. 그런 다음

어쩌면 당신이해야 아마 ...

Answer 3

는 폴링을 사용하지 않기 때문에 ...

$('#iframe-1').contents().find('body').bind('resize', function(){ 
    $('#iframe-1').height($(this).height()); 
}); 

이 그것을해야 ... 높이가 변경으로 업데이트 유지 iframe js에서 맞춤 이벤트를 시작하는 것을 고려해보십시오.

$('#iframe-1').bind('iframeResize', function(event, newSize) { 
    $(this).height(newSize); 
    //or whatever else you'd like to do, such as call your update_height() function 
}); 

:

parent.$('#iframe-1').trigger("iframeResize", [$("body").height()]); 

그런 다음, 상위 페이지에서 이벤트가 발생하는 경우에 대한 핸들러를 설정 : 당신은 iframe의 내용이 변경 될 때마다 당신은 또한 iframe이 JS에서 jQuery를 사용하는 가정이를 추가 할 수 있습니다

이벤트에 newSize 매개 변수를 보내지 않으려면 (또는 iframe js가 이벤트 발생시이를 알지 못하는 경우) bind() 핸들러에 update_height() 코드를 넣을 수 있습니다. iframe 본문입니다.