Iframe 콘텐츠가로드되었을 때 감지 (크로스 브라우저)

Question

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이로드되고 문서가 준비되었을 때 브라우저에서 올바른 접근 방식을 찾아야합니까?

Answer 1

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. 자바 스크립트 만 사용할 수있는 항목을 사용할 수있는 경우 소스를 설정하고 페이지에 추가하기 전에 'onload'이벤트 기능을 설정하여 동적으로 만들 수 있습니다. 이 경우 콜백이 설정되기 전에로드 할 수 없습니다.

3. 마크 업에 포함의 구식 방법 :

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

인라인 HTML에서 핸들러는 거의 항상 잘못된 일이며, 피할 수 'onsomething'하지만,이에 때로는 가장 나쁜 선택이 아닌 경우가 있습니다.

Answer 2

블로그 게시물 this을 참조하십시오. jQuery를 사용하지만 사용하지 않아도 도움이됩니다.

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

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

Answer 3

React를 사용하는 사용자의 경우 iframe 요소에 onLoad 이벤트 리스너를 설정하는 것만 큼 간단합니다. 엠버를 사용하는 사람들을위한

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

Answer 4

이 예상대로 작동합니다 :

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