web-dev-qa-db-ja.com

iframe srcの読み込みに失敗するとエラーをキャッチします。エラー：-「フレームに「http://www.google.co.in/」を表示することを拒否しました。」

Knockout.jsを使用してiframe srcタグをバインドしています（これはユーザーに関して構成可能です）。

ここで、ユーザーが http://www.google.com （iframeで読み込まれないことがわかっているため、-veシナリオで使用する理由）を設定している場合は、表示する必要がありますIFrameで。しかし、それはエラーをスローします-

「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームに「 http://www.google.co.in/ 」を表示することを拒否しました。

Iframeには次のコードがあります。

<iframe class="iframe" id="iframe" data-bind="attr: {src: externalAppUrl, height: iframeheight}">
    <p>Hi, This website does not supports IFrame</p>
</iframe>

URLの読み込みに失敗した場合、私は欲しいです。 カスタムメッセージを表示したい Screenshot of console when I get error FIDDLE HERE

今、onloadとonerrorを次のように使用すると：

<iframe id="browse" style="width:100%;height:100%" onload="alert('Done')" onerror="alert('Failed')"></iframe>

W3schools.comの読み込みは正常に機能しますが、google.comでは正常に機能しません。

第二に：-関数として作成し、フィドルでやったようにしようとすると、機能しません。

<iframe id="browse" style="width:100%;height:100%" onload="load" onerror="error"></iframe>

どのように実行してエラーをキャプチャする必要があるのか​​わかりません。

編集：-私は見ました iframeがロードまたはロードしない場合、関数を呼び出したい stackoverflowの質問ですが、iframeにロードできるサイトのエラーを表示します。

また、私は ロードイベントのStackoverflow iframe ありがとうございます！

jqueryiframeknockout.jssame-origin-policy
65
Shubh

ブラウザによって Same Origin Policy が設定されているため、クライアント側からこれを行うことはできません。 iFrameから幅や高さなどの基本的なプロパティ以外の多くの情報を取得することはできません。

また、googleは応答ヘッダーにSAMEORIGINの「 X-Frame-Options 」を設定します。

Googleにajax呼び出しを行ったとしても、ブラウザがSame Origin Policyを実施しているため、応答を検査することはできません。

したがって、唯一のオプションは、サーバーからリクエストを作成して、IFrameでサイトを表示できるかどうかを確認することです。

そのため、サーバー上でWebアプリはwww.google.comにリクエストを行い、X-Frame-Optionsのヘッダー引数があるかどうかを確認するためにレスポンスを検査します。存在する場合は、IFrameがエラーになることがわかります。

39
Evan Larsen

Iframeの load イベントをバインドできると思います。このイベントは、iframeコンテンツが完全にロードされたときに発生します。

同時に、setTimeoutを開始できます。iFrameがロードされている場合は、タイムアウトをクリアするか、タイムアウトを発生させます。

コード：

var iframeError;

function change() {
    var url = $("#addr").val();
    $("#browse").attr("src", url);
    iframeError = setTimeout(error, 5000);
}

function load(e) {
    alert(e);
}

function error() {
    alert('error');
}

$(document).ready(function () {
    $('#browse').on('load', (function () {
        load('ok');
        clearTimeout(iframeError);
    }));

});

デモ： http://jsfiddle.net/IrvinDominin/QXc6P/

第二の問題

これは、インライン関数呼び出しで括弧が欠落しているためです。これを変更してみてください：

<iframe id="browse" style="width:100%;height:100%" onload="load" onerror="error"></iframe>

これに：

<iframe id="browse" style="width:100%;height:100%" onload="load('Done func');" onerror="error('failed function');"></iframe>

デモ： http://jsfiddle.net/IrvinDominin/ALBXR/4/

16
Irvin Dominin

Onloadは常にトリガーになります。この問題はtry catchブロックを使用するのが大好きです。contentDocumentを取得しようとすると例外がスローされます。

iframe.onload = function(){
   var that = $(this)[0];
   try{
        that.contentDocument;
   }
   catch(err){
        //TODO 
   }
}
7
H.Eden

これはEdensの回答に対するわずかな修正です-私にとってchromeではエラーをキャッチしませんでした。コンソールには引き続きエラーが表示されますが、フレームに「 https://www.google.ca/ 」の表示を拒否しました。 「X-Frame-Options」を「sameorigin」に設定します。」少なくともこれでエラーメッセージがキャッチされ、対処できます。

 <iframe id="myframe" src="https://google.ca"></iframe>

 <script>
 myframe.onload = function(){
 var that = document.getElementById('myframe');

 try{
    (that.contentWindow||that.contentDocument).location.href;
 }
 catch(err){
    //err:SecurityError: Blocked a frame with Origin "http://*********" from accessing a cross-Origin frame.
    console.log('err:'+err);
}
}
</script>
6
user2677034

同様の問題に直面しました。 onloadハンドラを使用せずに解決しました。AngularJsプロジェクトで作業していたので、$ intervalと$ timeoutを使用しました。 UはsetTimeoutとsetIntervalも使用できます。コードは次のとおりです。

 var stopPolling;
 var doIframePolling;
 $scope.showIframe = true;
 doIframePolling = $interval(function () {
    if(document.getElementById('UrlIframe') && document.getElementById('UrlIframe').contentDocument.head && document.getElementById('UrlIframe').contentDocument.head.innerHTML != ''){
        $interval.cancel(doIframePolling);
        doIframePolling = undefined;
        $timeout.cancel(stopPolling);
        stopPolling = undefined;
        $scope.showIframe = true;
    }
},400);

stopPolling = $timeout(function () {
        $interval.cancel(doIframePolling);
        doIframePolling = undefined;
        $timeout.cancel(stopPolling);
        stopPolling = undefined;
        $scope.showIframe = false;     
},5000);

 $scope.$on("$destroy",function() {
        $timeout.cancel(stopPolling);
        $interval.cancel(doIframePolling);
 });

0.4秒ごとにiFrameドキュメントのヘッドをチェックし続けます。 CORSエラーが空白のページを表示するため、ロードはCORSによって停止されませんでした。 5秒後に何も表示されない場合は、何らかのエラー（Corsポリシー）などがありました。適切なメッセージを表示してください。ありがとう。それがあなたの問題を解決することを願っています。

1
viresh

私は同じ問題を抱えています。chromeは、iframe srcの読み込みエラー時にonerrorを起動できません。

しかし、私の場合は、クロスドメインのhttpリクエストを作成するだけなので、iframeの代わりにスクリプトsrc/onload/onerrorを使用します。それはうまく機能しています。

0
Engin Morse

window.lengthで解決しました。しかし、このソリューションを使用すると、現在のエラー（Xフレームまたは404）を取得できます。

iframe.onload = event => {
   const isLoaded = event.target.contentWindow.window.length // 0 or 1
}

MSDN

0
Qeemerc