Iframe 콘텐츠가로드 된시기 감지 (크로스 브라우저)

Iframe 콘텐츠가로드 된시기 감지 (크로스 브라우저)

---

iframe과 해당 콘텐츠가로드되었지만 운이 좋지 않은시기를 감지하려고합니다. 내 응용 프로그램은 상위 창의 텍스트 필드에 일부 입력을 받아 iframe을 업데이트하여 '실시간 미리보기'를 제공합니다.

iframe로드 이벤트가 발생하는시기를 감지하기 위해 다음 코드 (YUI)로 시작했습니다.

$E.on('preview-pane', 'load', function(){
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0];
}

'preview-pane'은 내 iframe의 ID이며 YUI를 사용하여 이벤트 핸들러를 연결하고 있습니다. 그러나 내 콜백에서 본문에 액세스하려는 시도 (iframe로드시)가 실패합니다. 이벤트 핸들러가 준비되기 전에 iframe이로드되기 때문이라고 생각합니다. 이 코드는 iframe을 생성하는 PHP 스크립트를 절전 모드로 만들어 iframe 로딩을 지연 시키면 작동합니다.

기본적으로 iframe이로드되고 문서가 준비 될 때를 감지하기 위해 브라우저에서 올바른 접근 방식이 무엇인지 묻습니다.

---

iframe이로드되고 문서가 준비된시기를 감지하려면?

iframe이 프레임 내부의 스크립트에서 자신을 알 수 있다면 이상적입니다. 예를 들어 부모 함수를 직접 호출하여 준비되었음을 알릴 수 있습니다. 예상치 못한 순서로 일이 발생할 수 있으므로 프레임 간 코드 실행에는 항상주의가 필요합니다. 또 다른 대안은 'var isready = true;'를 설정하는 것입니다. 자체 범위에서 부모 스크립트가 'contentWindow.isready'에 대해 스니핑하도록합니다 (그렇지 않으면 onload 핸들러를 추가합니다).

어떤 이유로 iframe 문서가 협력하는 것이 실용적이지 않다면 기존의로드-레이스 문제, 즉 요소가 서로 바로 옆에 있더라도 다음과 같은 문제가 있습니다.

<img id="x" ... />
<script type="text/javascript">
    document.getElementById('x').onload= function() {
        ...
    };
</script>

스크립트가 실행될 때 항목이 이미로드되지 않았다는 보장은 없습니다.

로드 레이스에서 벗어나는 방법은 다음과 같습니다.

1. IE에서는 'readyState'속성을 사용하여 이미로드되었는지 확인할 수 있습니다.

2. JavaScript가 활성화 된 상태에서만 항목을 사용할 수있는 경우 소스를 설정하고 페이지에 추가하기 전에 'onload'이벤트 기능을 설정하여 동적으로 생성 할 수 있습니다. 이 경우 콜백이 설정되기 전에로드 할 수 없습니다.

3. 마크 업에 포함하는 구식 방식 :

   <img onload="callback(this)" ... />

HTML의 인라인 'onsomething'핸들러는 거의 항상 잘못된 것이며 피해야합니다. 그러나이 경우에는 때때로 가장 나쁜 옵션입니다.

---

이 블로그 게시물을 참조하십시오 . jQuery를 사용하지만 사용하지 않더라도 도움이 될 것입니다.

기본적으로 이것을 당신의 document.ready()

$('iframe').load(function() {
    RunAfterIFrameLoaded();
});

---

React를 사용하는 경우 동일 출처 iframe로드 이벤트를 감지하는 것은 onLoadiframe 요소에 이벤트 리스너를 설정하는 것만 큼 간단합니다 .

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

---

For anyone using Ember, this should work as expected:

<iframe onLoad={{action 'actionName'}}  frameborder='0' src={{iframeSrc}} />

참고URL : https://stackoverflow.com/questions/751435/detecting-when-iframe-content-has-loaded-cross-browser