iframe로드 완료 이벤트 캡처


답변:


197

<iframe>요소에 대한 load이벤트 가 있습니다.


그 사건을 듣는 방법은 당신에게 달려 있지만 일반적으로 가장 좋은 방법은 다음과 같습니다.

1) 프로그래밍 방식으로 iframe 만들기

iframe load이로 드 되기 전에 리스너를 연결하여 항상 리스너를 호출 해야합니다 .

<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...'; 
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>

2) 인라인 자바 스크립트 는 HTML 마크 업 내부에서 사용할 수있는 또 다른 방법입니다.

<script>
function onMyFrameLoad() {
  alert('myframe is loaded');
};
</script>

<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>

3) 또한 이벤트 리스너를 부착 할 수 있는 요소 후 돌며, <script>태그,하지만이 경우, iframe이 이미 당신이 당신의 청취자를 추가에 도착하는 시간에 의해로드되는 약간의 가능성이 있음을 유의하십시오. 따라서 iframe이 매우 빠르거나 캐시에서 오는 경우와 같이 호출 되지 않을 수 있습니다.

<iframe id="myframe" src="..."></iframe>

<script>
document.getElementById('myframe').onload = function() {
  alert('myframe is loaded');
};
</script>

또한 이 유형의 이벤트를 발생시킬 수있는 요소 에 대한 다른 답변을 참조하십시오load


2
고마워, 이것은 내가 필요한 것을 정확하게합니다!
Jaime Garcia

1
이 방법을 사용하면 iframe이로드 될 때 단일 기능 만 실행할 수 있습니다. 보기 내 대답은 아래 사용하여 addEventListener여러 콜백로드 이벤트를 실행할 수 있습니다.
Iest

1
이 방법은 스크립트 태그를 실행하기 전에 iframe을로드 할 수 있으므로 경쟁 조건에 취약합니다 .
Iest

7
파일을 다운로드하려고 할 때로드 이벤트가 작동하지 않습니다.
Jerry

1
예, iFrame 컨텐츠가 HTML이 아닌 경우 (예 : PDF) IE에서는 작동하지 않습니다. 이 참조 connect.microsoft.com/IE/feedback/details/809377/...
세르게이 Gussak

27

위의 답변 중 어느 것도 나를 위해 효과가 없었지만 이것은

업데이트 :

@doppleganger가 아래에서 지적했듯이 jQuery 3.0부터로드가 사라 졌으므로 다음을 사용하는 업데이트 된 버전이 on있습니다. 이것은 실제로 jQuery 1.7 이상에서 작동하므로 jQuery 3.0이 아닌 경우 에도이 방법으로 구현할 수 있습니다.

$('iframe').on('load', function() {
    // do stuff 
});

1
jQuery 3.0부터는 load사라졌습니다. .on('load', function() { ... })대신 사용하십시오 .
Doppelganger

당신이 사용하는 jquery경우 jqLite다음이 방법입니다!
Peter

11

이를 위해 바닐라 자바 ​​스크립트 에는 또 다른 일관된 방법이 있습니다 ( IE9 +에만 해당 ).

const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');

iframe.addEventListener('load', handleLoad, true)

그리고 Observables에 관심이 있다면 트릭을 수행하십시오.

return Observable.fromEventPattern(
  handler => iframe.addEventListener('load', handler, true),
  handler => iframe.removeEventListener('load', handler)
);

handleLoad()iFrame 렌더링을보기 전에 중단 점에서 디버거가 중지되는 것이 문제 입니까? 나는 그것이 컨텐츠 로딩 문제가 아닌 순수한 렌더링 문제이기를 바랍니다.
Sridhar Sarnobat

iframe이 이미있을 때 jquery로 해당 이벤트를 캡처하는 방법은 무엇입니까? 즉, iquery는 jquery에 의해 생성되지 않습니다.
gumuruh

3

오프 스크린 일 때 iframe이로드되면 onload 이벤트가 발생하지 않는 것 같습니다. "새 창에서 열기"/ w 탭을 사용할 때 자주 발생합니다.


2
또한 디스플레이와 iframe이 없음)
펠리 N 우라

1

이 방법으로 jquery ready 이벤트를 캡처 할 수도 있습니다.

$('#iframeid').ready(function () {
//Everything you need.
});

다음은 실제 예입니다.

http://jsfiddle.net/ZrFzF/


16
나는 그 코드가 당신이 생각하는 것을 수행한다고 생각하지 않습니다. 바이올린에서 "#iFrame"선택기를 다른 것으로 바꿀 수 있으며 경고가 계속 발생합니다
roryok

6
@roryok 외에도 DOM이 준비되면 전체 페이지가로드되지 않고 ready가 실행됩니다.
Ivan Nikitin

1
DOM이 준비되면 컨텐츠가로드 될 때가 아니라 js가 실행될 때 ready가 시작됩니다.
Sergey Gussak

2
$ ( "# iframeid"). ready는 요소가 돔에있을 때 함수를 트리거합니다. ifram의 로딩이 완료되지 않은 경우.
Popsyjunior

그것은 한 번만 호출 :(
Hossein Badrnezhad
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.