Attrape l'erreur si la src de l'iframe ne se charge pas . Erreur :-"Refus d'afficher 'http://www.google.co.in/' dans un cadre.."

Question

J'utilise Knockout.js pour lier l'iframe src tag (configurable en fonction de l'utilisateur).

Maintenant, si l'utilisateur a configuré http://www.google.com (Je sais qu'il ne se chargera pas dans une iframe, c'est pourquoi je l'utilise pour le scénario -ve) et cela doit être affiché dans une IFrame. mais il y a une erreur :-)

Refus d'affichage ' http://www.google.co.in/ dans un cadre parce qu'il a défini 'X-Frame-Options' à 'SAMEORIGIN'.

J'ai le code suivant pour l'Iframe :-)

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

Ce que je veux, c'est que si l'URL ne se charge pas. Je veux afficher Message personnalisé . FIDDLE ICI

Maintenant, si j'utilise onload et onerror comme:-

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

Le chargement de w3schools.com fonctionne bien, mais pas celui de google.com.

Deuxièmement, si j'en fais une fonction et que j'essaie comme je l'ai fait dans mon fiddle, cela ne fonctionne pas.

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

Je ne sais pas comment le faire fonctionner et capturer l'erreur.

Édité:- J'ai vu Vous voulez appeler une fonction si l'iframe ne se charge pas ou se charge question dans stackoverflow mais il montre une erreur pour les sites qui peuvent être chargés dans iframe.

J'ai également examiné Iframe de Stackoverflow sur l'événement de chargement Merci !

Answer 1

Vous ne pourrez pas le faire du côté du client à cause de l'option Politique de la même origine définis par les navigateurs. Vous ne pourrez pas obtenir beaucoup d'informations de l'iFrame autres que les propriétés de base comme sa largeur et sa hauteur.

De plus, google ajoute dans son en-tête de réponse un ' X-Frame-Options de SAMEORIGIN.

Même si vous faites un appel ajax à Google, vous ne pourrez pas inspecter la réponse parce que le navigateur applique la politique de la même origine.

La seule option est donc de faire la demande à partir de votre serveur pour voir si vous pouvez afficher le site dans votre IFrame.

Ainsi, sur votre serveur, votre application web ferait une requête à www.google.com et inspecterait la réponse pour voir si elle a un argument d'en-tête X-Frame-Options. Si c'est le cas, vous savez que l'IFrame va se tromper.

Answer 2

Je pense que vous pouvez lier le load de l'iframe, l'événement se déclenche lorsque le contenu de l'iframe est entièrement chargé.

En même temps, vous pouvez lancer un setTimeout, si l'iFrame est chargée, effacer le timeout ou laisser le timeout s'écouler.

Code :

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);
    }));

});

Démonstration : http://jsfiddle.net/IrvinDominin/QXc6P/

Deuxième problème

C'est parce qu'il manque les parenthèses dans l'appel de fonction en ligne ; essayez de changer cela :

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

dans ce domaine :

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

Démonstration : http://jsfiddle.net/IrvinDominin/ALBXR/4/

Answer 3

L'onload sera toujours déclenché, j'ai résolu ce problème en utilisant le bloc try catch, qui lèvera une exception lorsque vous essayerez d'obtenir le contentDocument.

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

Answer 4

Il s'agit d'une légère modification de la réponse d'Edens qui, dans mon cas, n'a pas détecté l'erreur dans Chrome. Bien que vous obteniez toujours une erreur dans la console : "Refus d'afficher ' https://www.google.ca/ ' dans un cadre parce qu'il a défini 'X-Frame-Options' à 'sameorigin'". Au moins, cela permet d'identifier le message d'erreur et de le traiter.

 <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>

Answer 5

Je l'ai résolu avec window.length . Mais avec cette solution, vous pouvez prendre l'erreur actuelle (X-Frame ou 404).

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

MSDN