[解決済み] iframe srcの読み込みに失敗した場合のエラーをキャッチする。Error :-"Refused to display 'http://www.google.co.in/' in a frame..."

質問

私は Knockout.js を使用して、iframe をバインドしています。 src タグをバインドします（これはユーザーごとに設定可能です）。

ここで、ユーザーが http://www.google.com (私はそれがiframeでロードされません知っている、私は-veシナリオのためにそれを使用している理由です)と、それはIFrameで表示する必要があります。 しかし、それはエラーをスローします。

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

私はIframeのために次のコードを持っています:-。

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

私が欲しいのは、URLの読み込みに失敗した場合です。私は表示したい カスタムメッセージ . ここからフィドル

では、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>

どのように実行させ、エラーを捕捉すればいいのかわかりません。

編集： - 私は見た が読み込まれなかったり、読み込まれた場合、関数を呼び出したい。 の質問をstackoverflowで見ましたが、iframeで読み込み可能なサイトではエラーが表示されます。

また、調べたところ Stackoverflowのiframeをロードイベント時に ありがとうございます!

どのように解決するのですか？

クライアント側からは、このようなことはできません。 同一生成元ポリシー が設定されているためです。 iFrame からは、幅や高さなどの基本的なプロパティ以外の多くの情報を得ることはできません。

また、googleはレスポンスヘッダーに' X-フレーム-オプション をSAMEORIGINに設定しています。

たとえgoogleにajaxで呼び出したとしても、ブラウザがSAME ORIGINポリシーを適用しているため、レスポンスを検査することはできません。

そのため、唯一の選択肢は、サーバーからリクエストを行い、IFrameでサイトを表示できるかどうかを確認することです。

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