web-dev-qa-db-ja.com

iframeコンテンツが正常にロードされたかどうかを検出します

Iframeを含むウィジェットがあります。ユーザーはこのiframeのURLを設定できますが、URLをロードできなかった場合（URLが存在しないか、ユーザーがインターネットにアクセスできない場合）、iframeはデフォルトのオフラインページにフェイルオーバーする必要があります。

問題は、iframeをロードできるかどうかをどのように検出できるかです。 「load」イベントにサブスクライブしようとしました。しばらくしてからこのイベントが発生しない場合、フェイルオーバーしますが、Firefoxでのみ機能します。IE and Chromeは、「ページが見つかりません」が表示されたときに「load」イベントを発生させます。

javascriptjavascript-eventscross-domain
31
Javier Orellana

現在、ブラウザには一連のセキュリティ制限があり、iframeのコンテンツ（ドメインに属していない場合）からユーザーを遠ざけています。

その機能が本当に必要な場合は、プロキシとして動作する必要があるサーバーページを構築し、URLをパラメーターとして受け取り、それが有効なURLかどうかをテストし、エラーページをリダイレクトまたは表示する必要があります。

7
Adilson de Almeida Jr

Google経由で次のリンクを見つけました： http://wordpressapi.com/2010/01/28/check-iframes-loaded-completely-browser/

「ページが見つかりません」の問題が解決するかどうかわからない。

<script type="javascript">
var iframe = document.createElement("iframe");
iframe.src = "http://www.your_iframe.com/";
if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera) {
  iframe.onreadystatechange = function(){
    if (iframe.readyState == "complete"){
      alert("Iframe is now loaded.");
    }
  };
} else {
  iframe.onload = function(){
    alert("Iframe is now loaded.");
  };
}
</script>

私は自分で試していないので、うまくいくかどうかはわかりません。幸運を！

14
RobinBrouwer

Iframeのコンテンツを制御すると、iframeは親にメッセージを送信できます。

        parent.postMessage('iframeIsDone', '*');

親コールバックはメッセージをリッスンします。

        var attachFuncEvent = "message";
        var attachFunc = window.addEventListener ;
        if (! window.addEventListener) {
            attachFunc = window.attachEvent;
            attachFuncEvent = "onmessage";
        }

        attachFunc(attachFuncEvent, function(event) {
            if (event.data ==  'iframeIsDone') { // iframe is done callback here
            }
        });
4
Henry

URLが使用可能かどうかを確認してから、iframeの実際のURLを設定するだけですか？例えばJQueryを使用

var url = "google.com"
var loading_url = "/empty.html"
document.getElementById("iframe").src = loading_url;
$.ajax({
    url: url,
    type: 'GET',
    complete: function(e, xhr, settings){
         if(e.status === 200){
              document.getElementById("iframe").src = url;
         }
    }
});

編集：これはクロスドメインでは機能しないようです。これらの場合、ステータスコードは0です。

2
Jens Timmerman

Iframeのコンテンツを制御できる場合（たとえば、ページに任意のコードを追加できます）、それぞれに特別な関数を実装してから、ページでその関数を呼び出してエラーをキャッチできます（経由してwindow.onerrorハンドラー）ページがロードされなかったためにevalを介して呼び出された関数が失敗した場合。

コードの例を次に示します。 http://www.tek-tips.com/viewthread.cfm?qid=1114265&page=42

0
DVK

Onloadが起動したら、iframeのコンテンツを清掃して、有用なページが含まれているかどうかを確認できます。残念ながら、すべてのブラウザで異なる「ページが見つかりません」というメッセージが表示されるため、このブラウザを指定する必要があります。

詳細については、こちらをご覧ください http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for -both-ie-and-firefox /

0
Bitsplitter