jQuery : iFrame이 jQuery 로드할 떄까지 기다리기 : 방법, 예제, 구현

jQuery : iFrame이 jQuery 로드할 떄까지 기다리기 : 방법, 예제, 구현

 

최근에는 iframe 내의 코드에서 JavaScript로 작업 해야 하는 프로젝트가 있습니다.

직면한 문제는 iframe 내부의 웹 사이트가 JavaScript를 로드하는 페이지보다 로드하는 데 시간이 훨씬 오래 걸린다는 것입니다. 일반적으로 jQuery로 작업 할 때 코드 또는 init 함수를 document ready 함수로 감싸서 웹 사이트가 로드 될 때만 코드가 실행되도록 합니다.

$( document ).ready(function() {
    console.log( "Webpage is ready!" );
});

 

 

그러나 iframe 사이트가 로드되지 않았으므로 iframe 내부에서 선택기를 찾을 수 없기 때문에 jQuery가 실패한다는 것을 의미 하므로이 상황에서는 이 방법을 사용할 수 없습니다.

따라서 iQuery 가 로드 될 때까지 기다린 다음 jQuery 코드를 시작하기 위해 부모 페이지에서 트리거 및 이벤트를 기다리는 방법을 찾아야 했습니다. 이전 튜토리얼에서 jQuery load () 메소드에 대해 작성했으며 이를 사용하여 스크립트를 호출하고 해당 스크립트가 실행 된 후 수행했습니다.

// load the RSS feed into the #feed_result element
$("#feed_result").load("process_rss_feed.php");

 

 

이 문제를 조사하는 동안 페이지가 완료되면 iframe에서 로드 기능을 사용하여 로드 이벤트를 트리거 할 수 있음을 발견했습니다. iframe의 ID에서 로드 이벤트를 트리거하는 메소드를 사용하기 만하면 됩니다. 먼저 iframe HTML에 ID를 추가합니다.

<iframe id="iframe-id" src="http://www.websitethattakesalongtimetoload.com" frameborder="0" width="100%" height="900"></iframe>

 

 

 

그런 다음 iframe이 완전히 로드되면 이 iframe에서 on 메소드를 사용하여 로드 이벤트를 트리거합니다.

$('#iframe-id').on( 'load', function() {
    // code will run after iframe has finished loading
} );