web-dev-qa-db-fra.com

Erreur de capture si le chargement du fichier iframe src échoue. Erreur: - "Refus d'afficher 'http://www.google.co.in/' dans un cadre .."

J'utilise Knockout.js pour lier la balise iframe src (ce sera configurable en ce qui concerne l'utilisateur).

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

Refusé d'afficher ' http://www.google.co.in/ ' dans un cadre parce que c'est réglez 'X-Frame-Options' sur 'SAMEORIGIN'.

J'ai le code suivant pour 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 si l'URL ne se charge pas. Je souhaite afficher Message personnalisé .Screenshot of console when I get errorFIDDLE ICI

Maintenant, si j'utilise onload et onerror en tant que: -

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

Cela fonctionne très bien en chargeant w3schools.com mais pas avec google.com.

Deuxièmement: - si je le fais en fonction et que j'essaye comme je l'ai fait dans mon violon, ça ne marche pas.

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

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

Édité: - J'ai vu Je veux appeler une fonction si iframe ne charge pas ou ne pose pas la question dans stackoverflow mais affiche une erreur pour les sites pouvant être chargés dans iframe.

En outre, j'ai examiné Stackoverflow iframe lors d'un événement de charge Merci !! 

jqueryiframeknockout.jssame-origin-policy
64
Shubh

Vous ne pourrez pas faire cela du côté client à cause de la Même politique d'origine définie par les navigateurs. Vous ne pourrez pas obtenir beaucoup d’informations de l’iFrame autres que les propriétés de base telles que sa largeur et sa hauteur.

En outre, Google définit dans son en-tête de réponse un ' X-Frame-Options ' de SAMEORIGIN.

Même si vous avez fait un appel ajax à Google, vous ne pourrez pas inspecter la réponse, car le navigateur applique la stratégie d'origine.

Ainsi, la seule option est de demander à votre serveur si vous pouvez afficher le site dans votre IFrame.

Ainsi, sur votre serveur, votre application Web adressera une demande à www.google.com, puis examinera la réponse pour voir si elle possède un argument d'en-tête de X-Frame-Options. Si tel est le cas, vous savez que le IFrame va commettre une erreur.

37
Evan Larsen

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

Dans le même temps, vous pouvez démarrer setTimeout. Si l'iFrame est chargé, effacez le délai d'attente ou laissez le délai expiré.

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émo: http://jsfiddle.net/IrvinDominin/QXc6P/

Deuxième problème

C'est parce que vous oubliez les parenthèses dans l'appel de fonction en ligne; essayez de changer ceci:

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

dans ceci:

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

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

17
Irvin Dominin

Le chargement sera toujours un déclencheur. Je recherche ce problème, utilisez try catch block. Il lève une exception lorsque vous essayez d’obtenir le contentDocument.

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

J'ai fait face à un problème similaire. Je l'ai résolu sans utiliser onload handler.J'ai travaillé sur le projet AngularJs, j'ai donc utilisé $ interval et $ timeout. Vous pouvez également utiliser setTimeout et setInterval.Voici le code:

 

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

Toutes les 0,4 secondes continuent à vérifier la tête du document iFrame. Le chargement n'a pas été arrêté par CORS car l'erreur CORS indique une page vierge . Si rien n'est présent au bout de 5 secondes, il y a eu une erreur (politique de Cors) etc .. Afficher le message approprié. J'espère que cela résoudra votre problème.

1
viresh

J'ai le même problème, chrome ne peut pas tirer onerror quand erreur de chargement iframe src.

mais dans mon cas, J'ai juste besoin de faire une requête http entre domaines, J'utilise donc le script src/onload/onerror au lieu de iframe . ça fonctionne bien.

0
Engin Morse

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

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

MSDN

0
Qeemerc