ロードするためにonreadystateを置き換えることができません

Question

iframeでファイルのダウンロードが完了したら、読み込み中のアイコンが表示されませんでした。 Internet Explorerで正常に動作していました。 Chromeでは、ファイルがiframeに読み込まれるまで待つことができませんでした。

何か助けていただければ幸いです。

function checkIframeLoaded() { 
    var iFrameObject = document.getElementById("iframehidden"); 
    var iframeDoc = iFrameObject.contentDocument || iFrameObject.contentWindow.document; 
    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == "interactive" || iframeDoc.readyState == "loaded") { 
     if (top.document.getElementById("tblPleaseWait") != null) { 
      top.document.getElementById("tblPleaseWait").style.display = "none"; 
     } 
     else if (document.getElementById("tblPleaseWait") != null) { 
      document.getElementById("tblPleaseWait").style.display = "none"; 
     } 
     return; 
    } 
} 

function setupLoader(objIFrame, brestorepane) { 
    if (objIFrame.attachEvent) { 
     if (brestorepane) { 
      objIFrame.attachEvent('onreadystatechange', checkIframeLoaded); 
     } 

    } else { 
     if (brestorepane) { 
      objIFrame.addEventListener('load', checkIframeLoaded()); 
     } 
    } 
} 

Answer 1

IE以外のブラウザでは、正しくハンドラを設定していません。

まず、タイプミスがあります。 addEventListnerはaddEventListenerである必要があります。あなたのJavaScript consoleがこれを言及しているかもしれません。

その後、をハンドラとして参照するのではなく、すぐにcheckIframeLoaded()と呼びます。

試してみてください。

objIFrame.addEventListener('load', checkIframeLoaded); 

Answer 2

自分のサイト上のコンテンツへiframe srcポイントもし、あなたが適切にallow-same-originを設定した後、あなたは、このメソッドを使用することができます（あなたはjQueryを使って質問をタグ付けされたので、このソリューションは、jQueryのを使用していますが、純粋なJS代替も可能である）

function checkIframeLoaded() { 
 
    if (top.document.getElementById("tblPleaseWait") != null) { 
 
    top.document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } else if (document.getElementById("tblPleaseWait") != null) { 
 
    document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } 
 
} 
 
$("#iframehidden").on("load", checkIframeLoaded);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='tblPleaseWait'>PLEASE WAIT</div> 
 
<iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe>

あなたがこれを行うことができます別の方法はiframe文書（例えばiframe.htmlなど）自体にコードを置くことです：iframe srcは他人の敷地内にある

$(window).on("load", function() 
{ 
    var plsWait = top.document.getElementById("tblPleaseWait"); 
    if(plsWait) plsWait.style.display = "none"; 
}); 

場合 - その後、あなたが困っています。リモートコンテンツがクロスサイトスクリプティングを許可するように設定されていない限り。ポールRoubが指摘したように

はまた、あなたはここでエラーを持っている：

objIFrame.addEventListener('load', checkIframeLoaded());

あなたが実際にloadイベントにcheckIframeLoaded機能を委任されていません。その関数を括弧()で実行し、代わりにその結果を委譲します（undefined）。その後

objIFrame.addEventListener('load', checkIframeLoaded);

あなただけの間スクリプティングの制約内で作業する必要があります。

は単にloadイベントがトリガされたときcheckIframeLoadedが呼ばれることで所望の効果を達成するために括弧を削除しますフレーム。

Answer 3

function checkIframeLoaded() { 
 
    if (top.document.getElementById("tblPleaseWait") != null) { 
 
    top.document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } else if (document.getElementById("tblPleaseWait") != null) { 
 
    document.getElementById("tblPleaseWait").style.display = "none"; 
 
    } 
 
} 
 
$("#iframehidden").on("load", checkIframeLoaded);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='tblPleaseWait'>PLEASE WAIT</div> 
 
<iframe id='iframehidden' name='iframehidden' src='http://stacksnippets.net' style='border:2px solid #ccc;'></iframe>