it-swarm.com.de

Catch-Fehler, wenn iframe src nicht geladen werden kann. Fehler: - "Die Anzeige von" http://www.google.co.in/ "in einem Frame wurde abgelehnt."

Ich verwende Knockout.js, um iframe src-Tags zu binden (Dies kann in Bezug auf den Benutzer konfiguriert werden).

Wenn der Nutzer http://www.google.com konfiguriert hat (ich weiß, dass es nicht in iframe geladen wird, verwende ich es deshalb für -ve-Szenario) und das muss in IFrame angezeigt werden. aber es wirft Fehler: -

Die Anzeige von ' http://www.google.co.in/ ' in einem Frame wurde abgelehnt, da 'X-Frame-Optionen' auf 'SAMEORIGIN' gesetzt wurden.

Ich habe den folgenden Code für Iframe: -

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

Was ich will, ist, wenn die URL nicht geladen werden kann. Ich möchte Benutzerdefinierte Nachricht anzeigen. Screenshot of console when I get error FIDDLE HIER

Nun, wenn ich onload und onerror benutze als: -

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

Es funktioniert gut, w3schools.com zu laden, aber nicht mit google.com.

Zweitens: - Wenn ich es als eine Funktion mache und versuche, wie ich es in meiner Geige getan habe, funktioniert es nicht.

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

Ich weiß nicht, wie ich es zum Laufen bringen und den Fehler erfassen soll.

Bearbeitet: - Ich habe gesehen, Ich möchte eine Funktion aufrufen, wenn iframe nicht lädt oder die Frage in stackoverflow lädt, aber es zeigt Fehler für Sites an, die in iframe geladen werden können.

Außerdem habe ich in Stackoverflow iframe beim Laden Ereignis gesucht Danke!

64
Shubh

Sie können dies auf der Clientseite aufgrund der von den Browsern festgelegten Same Origin Policy nicht tun. Sie können nicht mehr viele Informationen vom iFrame erhalten, außer grundlegende Eigenschaften wie Breite und Höhe.

Google setzt in seinem Antwortheader außerdem ' X-Frame-Options ' von SAMEORIGIN.

Selbst wenn Sie einen Ajax-Aufruf bei Google durchgeführt haben, können Sie die Antwort nicht überprüfen, da der Browser dieselbe Origin-Richtlinie durchführt.

Daher besteht die einzige Möglichkeit darin, die Anforderung von Ihrem Server aus zu stellen, um festzustellen, ob Sie die Site in Ihrem IFrame anzeigen können.

Also, auf Ihrem Server ... würde Ihre Web-App eine Anfrage an www.google.com richten und dann die Antwort überprüfen, um zu sehen, ob sie ein Header-Argument von X-Frame-Options hat. Wenn es existiert, wissen Sie, dass der IFrame-Fehler auftritt.

37
Evan Larsen

Ich denke, dass Sie das load -Ereignis des Iframes binden können, das Ereignis wird ausgelöst, wenn der Iframe-Inhalt vollständig geladen ist.

Gleichzeitig kann ein setTimeout gestartet werden, wenn der iFrame gelöscht wird, löschen Sie das Timeout, oder lassen Sie das Timeout auslösen.

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

});

Demo: http://jsfiddle.net/IrvinDominin/QXc6P/

Zweites Problem

Dies liegt daran, dass Sie die Parens im Inline-Funktionsaufruf vermissen. Versuchen Sie dies zu ändern:

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

das sehr gut finden:

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

Demo: http://jsfiddle.net/IrvinDominin/ALBXR/4/

17
Irvin Dominin

Das Onload wird immer auslösen. Dieses Problem wurde mit try catch block blockiert. Wenn Sie versuchen, das contentDocument abzurufen, wird eine Ausnahme ausgelöst.

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

Dies ist eine geringfügige Modifikation der Antwort von Edens - die für mich in Chrome den Fehler nicht aufgefangen hat. Es wird zwar immer noch eine Fehlermeldung in der Konsole angezeigt: "Anzeige von" https://www.google.ca/ "in einem Frame verweigert, da" X-Frame-Optionen "auf" "gesetzt wurde Sameorigin '. " Zumindest fängt dies die Fehlermeldung ab und Sie können damit umgehen. 

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

Ich stand vor einem ähnlichen Problem. Ich habe es ohne Onload-Handler gelöst. Ich arbeitete an AngularJs Projekt, also habe ich $ Intervall und $ Timeout verwendet. Sie können auch setTimeout und setInterval verwenden. Hier ist der 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);
 });

Überprüfen Sie alle 0,4 Sekunden den Kopf des iFrame-Dokuments. Ich habe etwas vorhanden. Das Laden wurde nicht von CORS gestoppt, da der CORS-Fehler eine leere Seite zeigt . Wenn nach 5 Sekunden nichts vorhanden ist, ist ein Fehler aufgetreten (Cors-Richtlinie) etc .. Geeignete Nachricht anzeigen. Danke. Ich hoffe es löst dein Problem.

1
viresh

Ich habe das gleiche Problem, Chrome kann Onerror nicht auslösen, wenn ein Fehler beim Laden der Ladefunktion auftritt.

aber in meinem Fall Ich muss nur eine http-Anfrage über mehrere Domänen hinweg machen Ich verwende das Skript src/onload/onerror anstelle von iframe .

0
Engin Morse

Ich habe es mit window.length gelöst. Aber mit dieser Lösung können Sie aktuelle Fehler (X-Frame oder 404) nehmen.

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

MSDN

0
Qeemerc