Catch-Fehler, wenn iframe src nicht geladen werden kann. Fehler: - "Weigert sich," http://www.google.co.in/ "in einem Frame anzuzeigen."

Ich verwende Knockout.js, um das Iframe- srcTag zu binden (dies kann in Bezug auf den Benutzer konfiguriert werden).

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

Es wurde abgelehnt, " http://www.google.co.in/ " in einem Frame anzuzeigen, da "X-Frame-Optionen" auf "SAMEORIGIN" gesetzt wurde.

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 eine benutzerdefinierte Nachricht anzeigen . FIDDLE HIER

Nun, wenn ich onload und onerror verwende 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 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 ausführen und den Fehler erfassen soll.

Bearbeitet: - Ich habe gesehen , dass Sie eine Funktion aufrufen möchten, wenn iframe nicht geladen wird oder die Frage im Stackoverflow geladen wird, aber ein Fehler für Sites angezeigt wird, die in iframe geladen werden können.

Außerdem habe ich mir Stackoverflow iframe on load event angesehen. Danke !!

Sie können dies auf der Clientseite aufgrund der von den Browsern festgelegten Richtlinie für denselben Ursprung nicht tun . Sie können vom iFrame nur grundlegende Eigenschaften wie Breite und Höhe erhalten.

Außerdem setzt Google in seinem Antwortheader die ' X-Frame-Optionen ' von SAMEORIGIN.

Selbst wenn Sie einen Ajax-Anruf bei Google getätigt haben, können Sie die Antwort nicht überprüfen, da der Browser die Richtlinie für denselben Ursprung erzwingt.

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

Auf Ihrem Server stellt Ihre Web-App eine Anfrage an www.google.com und überprüft dann die Antwort, um festzustellen, ob sie ein Header-Argument für X-Frame-Optionen enthält. Wenn es existiert, wissen Sie, dass der IFrame einen Fehler macht.

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

Gleichzeitig können Sie ein setTimeout starten. Wenn der iFrame geladen ist, löschen Sie das Timeout. Lassen Sie das Timeout alternativ ausgelöst.

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 verpassen. 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/

Das Onload wird immer ausgelöst, ich habe dieses Problem mit try catch block behoben. Es wird eine Ausnahme auslösen, wenn Sie versuchen, das contentDocument abzurufen.

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

Dies ist eine geringfügige Änderung der Antwort von Edens - die für mich in Chrom den Fehler nicht erkannt hat. Obwohl in der Konsole immer noch eine Fehlermeldung angezeigt wird: "Die Anzeige von" https://www.google.ca/ "in einem Frame wurde abgelehnt, da" X-Frame-Optionen "auf" sameorigin "gesetzt wurde." Zumindest wird dadurch die Fehlermeldung abgefangen 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>

Ich hatte ein ähnliches Problem. Ich habe es ohne Verwendung des Onload-Handlers gelöst. Ich habe an AngularJs Projekt gearbeitet, also habe ich $ interval 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 von CORS nicht gestoppt, da der CORS-Fehler eine leere Seite anzeigt. Wenn nach 5 Sekunden nichts mehr vorhanden ist, ist ein Fehler aufgetreten (Cors-Richtlinie) usw. Geeignete Meldung anzeigen. Danke. Ich hoffe es löst dein Problem.

Ich habe das gleiche Problem, Chrome kann keinen Fehler auslösen, wenn iframe src Ladefehler.

In meinem Fall muss ich nur eine domänenübergreifende http-Anfrage stellen, daher verwende ich das Skript src / onload / onerror anstelle von iframe. es funktioniert gut.

Ich habe es mit gelöst window.length. Mit dieser Lösung können Sie jedoch einen aktuellen Fehler (X-Frame oder 404) erkennen.

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

MSDN

Wie in der akzeptierten Antwort https://stackoverflow.com/a/18665488/4038790 erläutert , müssen Sie dies über einen Server überprüfen.

Da es keine zuverlässige Möglichkeit gibt, dies im Browser zu überprüfen, sollten Sie sich einen schnellen Serverendpunkt erstellen, mit dem Sie überprüfen können, ob eine URL über iframe geladen werden kann. Sobald Ihr Server betriebsbereit ist, senden Sie einfach eine AJAX-Anfrage an ihn, um eine URL zu überprüfen, indem Sie die URL in der Abfragezeichenfolge als url(oder was auch immer Ihr Server wünscht) angeben. Hier ist der Servercode in NodeJs:

const express = require('express')
const app = express()

app.get('/checkCanLoadIframeUrl', (req, res) => {
  const request = require('request')
  const Q = require('q')

  return Q.Promise((resolve) => {
    const url = decodeURIComponent(req.query.url)

    const deafultTimeout = setTimeout(() => {
      // Default to false if no response after 10 seconds
      resolve(false)
    }, 10000)

    request({
        url,
        jar: true /** Maintain cookies through redirects */
      })
      .on('response', (remoteRes) => {
        const opts = (remoteRes.headers['x-frame-options'] || '').toLowerCase()
        resolve(!opts || (opts !== 'deny' && opts !== 'sameorigin'))
        clearTimeout(deafultTimeout)
      })
      .on('error', function() {
        resolve(false)
        clearTimeout(deafultTimeout)
      })
  }).then((result) => {
    return res.status(200).json(!!result)
  })
})

app.listen(process.env.PORT || 3100)