jquery - cross - access-control-allow-origin iframe

Error de captura si iframe src no se carga. Error:-"Se negó a mostrar ''http://www.google.co.in/'' en un marco..."

Question

Estoy usando Knockout.js para enlazar iframe src tag (Esto será configurable con respecto al Usuario).

Ahora, si el usuario ha configurado http://www.google.com (sé que no se cargará en iframe, es por eso que lo estoy usando para -ve escenario) y eso tiene que mostrarse en IFrame. pero arroja un error:

Se negó a mostrar '' http://www.google.co.in/ '' en un marco porque establece ''X-Frame-Options'' en ''SAMEORIGIN''.

Tengo el siguiente código para Iframe:

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

Lo que quiero es si la URL no se carga. Quiero mostrar el Mensaje personalizado . FIDDLE AQUÍ

Ahora, si uso onload y onerror como:

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

Funciona bien cargando w3schools.com pero no con google.com.

En segundo lugar: si lo hago como una función y lo intento como lo hice en mi violín, no funciona.

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

No sé cómo debería hacerlo funcionar y capturar el error.

Editado: - He visto Desea invocar una función si iframe no carga o carga la pregunta en stackoverflow pero muestra un error para los sitios que pueden cargarse en iframe.

Además, he investigado Stackoverflow iframe en load event ¡Gracias!

Answer 1

Creo que puede enlazar el evento de load del iframe, el evento se dispara cuando el contenido del iframe está completamente cargado.

Al mismo tiempo, puede iniciar un setTimeout, si el iFrame se carga, borre el tiempo de espera o permita que se dispare el tiempo de espera.

Código:

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

});

Demostración: http://jsfiddle.net/IrvinDominin/QXc6P/

Segundo problema

Es porque te pierdes los parens en la llamada a la función en línea; intente cambiar esto:

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

dentro de esto:

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

Demostración: http://jsfiddle.net/IrvinDominin/ALBXR/4/

Answer 2

La carga siempre se activará, y este problema se aplicará a través del bloque catch catch. Lanzará una excepción cuando intente obtener el contentDocument.

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

Answer 3

Me enfrenté a un problema similar. Lo resolví sin usar el controlador onload. Estaba trabajando en el proyecto AngularJs, así que usé $ interval y $ timeout. U también puede usar setTimeout y setInterval.Here''s 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);
 });

Cada 0,4 segundos sigue comprobando el encabezado del Documento iFrame. Algo está presente. CORS no detuvo la carga ya que el error CORS muestra una página en blanco. Si no hay nada presente después de 5 segundos hubo algún error (política de Cors), etc. Mostrar mensaje adecuado. Gracias. Espero que resuelva tu problema

Answer 4

No podrá hacer esto desde el lado del cliente debido a la Política de Mismo Origen establecida por los navegadores. No podrá obtener mucha información del iFrame aparte de las propiedades básicas como su ancho y alto.

Además, google establece en su encabezado de respuesta un '' X-Frame-Options '' de SAMEORIGIN.

Incluso si realizó una llamada ajax a Google, no podrá inspeccionar la respuesta porque el navegador aplica la Política de Same Origin.

Entonces, la única opción es hacer la solicitud de su servidor para ver si puede mostrar el sitio en su IFrame.

Entonces, en su servidor ... su aplicación web haría una solicitud a www.google.com y luego inspeccionaría la respuesta para ver si tiene un argumento de encabezado de X-Frame-Options. Si existe, entonces sabrá que el IFrame tendrá un error.