JavaScript의 iframe에서 onload 이벤트 구현

1. iFrame 로드 시 JavaScript 함수 실행
2. 순수 JavaScript를 사용하여 iframe의 load 이벤트 구현
3. onload 이벤트 리스너를 사용하여 iframe의 load 이벤트 구현
4. iframe의 HTML onload 이벤트 핸들러에서 인라인 기능 사용

<iframe>은 인라인 프레임 요소를 나타냅니다. 이것은 당사 웹 사이트의 다른 웹 페이지를 로드하고 상호 작용하는 창입니다. iframe을 사용하여 로드된 사이트 또는 웹페이지는 세션 기록과 캐시 값을 유지하며 상위 또는 호출하는 브라우저 화면에 종속되지 않습니다. 때때로 iFrame 콘텐츠가 로드되면 함수를 실행해야 할 수도 있습니다. iframe 콘텐츠가 로드되면 JavaScript에서 메서드를 실행하는 방법을 살펴보겠습니다.

iFrame 로드 시 JavaScript 함수 실행

iframe HTML 태그의 onload 이벤트 핸들러를 사용할 수 있습니다. 이벤트는 iframe의 모든 요소가 로드되면 시작됩니다. 여기에는 스크립트, 이미지, 링크, 서브프레임 등의 로드가 포함됩니다. HTML 태그에서 언급한 매개변수로 함수 선언을 허용합니다. onload="siteLoaded()"는 웹 브라우저 콘솔에 텍스트를 기록하는 간단한 JavaScript 기능인 siteLoaded() 기능을 실행합니다. 다음 코드를 참조하십시오.

<iframe src="https://www.youtube.com/" onload="siteLoaded()"></iframe>

function siteLoaded() {
  console.log('iframe content loaded');
}

출력:

iframe content loaded

순수 JavaScript를 사용하여 iframe의 load 이벤트 구현

iframe 로드가 완료되면 JavaScript 기능을 실행하는 또 다른 방법은 JavaScript의 onload 이벤트 핸들러를 사용하는 것입니다. 이를 위해 의도한 HTML 요소를 쿼리하고 HTML 요소의 onload 이벤트 핸들러에 JavaScript 함수를 첨부합니다. 이전 섹션에서 설명한 방식과 유사합니다. 차이점은 여기에서 Unobtrusive JavaScript라고 하는 순수한 JavaScript 접근 방식을 사용하고 있다는 것입니다. HTML은 간결하고 깔끔하게 유지됩니다. 더 나은 이해를 위해 다음 코드를 살펴보겠습니다.

<iframe src="https://www.youtube.com/"></iframe>

document.querySelector('iframe').addEventListener('load', function() {
  console.log('iframe content loaded');
});

출력:

iframe content loaded

이 코드를 실행하면 JavaScript가 null 객체에 리스너를 추가할 수 없다는 오류가 발생할 수 있습니다. 이를 위해 window.onload 메소드 내부에 코드를 래핑해야 합니다. 다음 코드 스니펫을 참조하세요.

window.onload = function() {
  document.querySelector('iframe').addEventListener('load', function() {
    console.log('iframe content loaded');
  });
}

JavaScript는 window의 모든 요소를 ​​로드하면 window.onload 함수를 실행합니다. JavaScript의 addEventListener() 함수는 이벤트 리스너를 HTML 객체에 연결합니다. 먼저 이벤트 리스너를 추가할 HTML 객체를 선택해야 합니다. document.querySelector()는 HTML 개체를 반환하고 이 개체에 .addEventListener() 함수를 사용하여 로드 이벤트 리스너를 연결합니다. addEventListener()는 iframe 요소가 로드되면 트리거되는 함수(여기서는 인라인 함수)를 연결합니다. addEventListener() 함수를 사용하여 HTML 요소에 다양한 이벤트를 추가할 수 있습니다. 그러나 논의 범위에서는 load 이벤트에 중점을 둘 것입니다. 마찬가지로, click 이벤트를 HTML 개체에 추가할 수도 있습니다.

onload 이벤트 리스너를 사용하여 iframe의 load 이벤트 구현

.addEventListener()와 마찬가지로 onload 이벤트도 사용할 수 있습니다. 여기에서도 document.getElementById() 또는 document.querySelector()와 같은 함수를 사용하여 iframe 요소를 선택합니다. 요소가 선택되면 JavaScript 함수를 요소에 첨부합니다. 또한 몇 가지 방법으로 수행할 수 있습니다. 한 가지 방법은 함수를 인라인으로 전달하는 것입니다. 또 다른 방법은 ()를 사용하지 않고 함수 객체를 첨부하는 것입니다. ()를 사용하면 JavaScript는 첫 번째 실행 인스턴스 자체에서 함수를 실행합니다. JavaScript에서는 더 일반적인 .addEventListener()와 달리 onload를 단독으로 사용합니다. onload 기능의 사용법을 이해하려면 다음 코드를 참조하십시오.

<iframe id="my_iframe" src="https://www.youtube.com/"></iframe>

window.onload = function() {
  document.getElementById('my_iframe').onload = function() {
    console.log('iframe content loaded');
  };
}

JavaScript가 요소를 쿼리할 수 있는지 확인하기 위해 window.onload 내부에 document.getElementById('my_iframe').onload 코드 섹션을 캡슐화합니다. window.onload는 모든 요소가 로드되고 document.getElementById('my_iframe')에서 요소를 가져올 수 있는지 확인합니다. 요소가 쿼리되면 HTML 개체의 onload 이벤트 핸들러를 사용하여 요소에 함수를 첨부합니다.

iframe의 HTML onload 이벤트 핸들러에서 인라인 기능 사용

load 이벤트에서 함수를 실행하는 또 다른 방법은 HTML에 인라인 메서드를 첨부하는 것입니다. 이것은 로드 이벤트에서 JavaScript 함수를 구현하는 권장 방법은 아니지만 절실히 필요할 때 해킹으로 유용합니다. 이 접근 방식에서는 iframe 요소의 onload 함수 속성에 있는 HTML의 메서드 인라인을 전달합니다. JavaScript는 iframe이 준비되면 함수를 실행합니다. 사용법을 이해하려면 다음 코드를 참조하십시오.

<iframe src="https://www.youtube.com/" onload="(function(){ console.log('iFrame Loaded'); })();"></iframe>

출력:

iFrame Loaded

onload 이벤트 핸들러에서 함수 호출을 작성하는 방식을 관찰하십시오. 인라인 함수 호출은 ()로 묶입니다. 그리고 인라인 함수 호출 뒤에 ()가 있습니다. div의 onclick 이벤트에 함수 선언을 첨부하는 것과 유사합니다.