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} />

Ember를 사용하는 모든 사람은 예상대로 작동합니다.

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