iframe 로드 완료 이벤트 캡처

iframe 로드 완료 이벤트 캡처

상위 페이지에서 iframe의 내용이 완전히 로딩되었을 때 캡처할 수 있는 방법이 있습니까?

<iframe>요소들은 그것에 대한 이벤트를 가지고 있습니다.

---

그 이벤트를 어떻게 듣느냐는 당신에게 달려 있지만, 일반적으로 가장 좋은 방법은 다음과 같습니다.

1) iframe을 프로그래밍 방식으로 만듭니다.

그것은 당신을 확실하게 해줍니다.load리스너는 iframe이 로딩을 시작하기 전에 항상 첨부하여 호출됩니다.

<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) inline javascript 는 HTML 마크업 안에서 사용할 수 있는 또 다른 방법입니다.

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

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

---

3) 또한 요소 뒤에 이벤트 수신기를 a 내부에 부착할 수 있습니다.<script>태그를 지정하지만 이 경우 리스너를 추가할 때 iframe이 이미 로드되어 있을 가능성이 적습니다.따라서 iframe이 매우 빠르거나 캐시에서 전송되는 경우와 같이 호출되지 않을 가능성이 있습니다.

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

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

---

어떤 요소가 이러한 유형의 이벤트를 발생시킬 수 있는지에 대한 다른 답변 보기

위의 답변들 중 어느 것도 저에게 통하지 않았지만, 이것은 효과가 없었습니다.

업데이트:

@doppleganger님께서 아래에 지적하신 바와 같이 jQuery 3.0 현재 로드가 사라졌으므로 다음을 사용하는 업데이트된 버전이 있습니다.on. 이것은 jQuery 1.7+에서 실제로 작동하기 때문에 아직 jQuery 3.0에 있지 않더라도 이런 방식으로 구현할 수 있으니 참고하시기 바랍니다.

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

바닐라 자바스크립트에는 다음과 같은 일관된 방법이 있습니다.

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

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

Observables에 관심이 있다면 이를 통해 효과를 얻을 수 있습니다.

import { fromEvent } from 'rxjs';

const iframe = document.getElementById('iframe');

fromEvent(iframe, 'load').subscribe(() => console.log('loaded'));

화면 밖에 있을 때 iframe이 로드되면 onload 이벤트가 발생하지 않는 것 같습니다.이 문제는 "새 창에서 열기" /w 탭을 사용할 때 자주 발생합니다.

1단계: 추가iframe템플릿으로

<iframe id="uvIFrame" src="www.google.com"></iframe>

2단계: 컨트롤러에 load listener를 추가합니다.

document.querySelector('iframe#uvIFrame').addEventListener('load', function () {
  $scope.loading = false;
  $scope.$apply();
});

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

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

작동 예는 다음과 같습니다.

http://jsfiddle.net/ZrFzF/

언급URL : https://stackoverflow.com/questions/3142837/capture-iframe-load-complete-event