2012-03-02 7 views
8

Tengo un iframe en mi página. Si el iframe no se carga, quiero que alert el mensaje "No se ha encontrado pdf" y si el iframe hace la carga, lo que debería alert "pdf abierto".¿Desea llamar a una función si el iframe no se carga o carga?

¿Alguien sabe cómo lograr eso?

+0

¿Está cargando un archivo PDF en el iframe? –

+0

@ ŠimeVidas sí. Quiero que si el pdf no se puede cargar desde el servidor, aparezca un mensaje de alerta "alerta" –

+0

¿Está el PDF en el mismo dominio que la página web? –

Respuesta

9

Entonces, la idea es usar una solicitud de Ajax para "probar" la URL. Las solicitudes Ajax le permiten vincular manejadores de "éxito" y "error", a diferencia de los elementos que solo proporcionan un controlador de "carga".

Por supuesto, las solicitudes Ajax están restringidas por la misma política de origen (a menos que el servidor web habilite CORS), pero usted indicó que el PDF está en el mismo dominio, por lo que no debería haber ningún problema.

Además, indicó que usa la biblioteca Mootools - Yo uso jQuery, por lo que solo puedo proporcionarle una solución jQuery, pero dado que estamos haciendo una simple solicitud Ajax con manejadores de "éxito" y "error" , debería ser capaz de recrear fácilmente una solución Mootools basada en mi solución jQuery.

Así, dado un IFRAME y una URL:

var iframe = $('#iframe')[0]; // reference to IFRAME element 
var url = 'files/document1.pdf'; 

El Ajax-solicitud:

$.get(url, function() { 
    iframe.onload = function() { alert('PDF opened!'); }; 
    iframe.src = url; 
}).error(function() { alert('PDF not found'); }); 

Éxito-demo:http://jsfiddle.net/CZWdL/1/show/
Error-demo:http://jsfiddle.net/CZWdL/2/show/

Entonces, si t La solicitud Ajax desencadena un evento de "error", simplemente alertamos inmediatamente al mensaje "No encontrado". Sin embargo, si la solicitud Ajax desencadena un evento de "éxito", asignamos un controlador de "carga" a nuestro elemento IFRAME (este controlador de "carga" eventualmente alertará al mensaje "Cargado") y establece la URL en su propiedad src a mano.

+1

Éste tampoco funcionará. La devolución de llamada de error de JQuery detecta el código de estado. Hay casos en que el servidor devuelve el estado 200 junto con x-frame-options: SAMEORIGIN. google.com hace esto. –

+0

Quiero decir que no funcionará en general. Pero para el caso del OP, es decir, para cargar el pdf en el iframe, debería funcionar. –

+0

Espera, ¿tanto JQuery como iFrame están obteniendo la URL? ¿No es eso un poco pesado? –

-2

Usted puede simplemente añadir este código en su marco flotante cuando está cargada:

<script type="text/javascript"> 
<!-- 
     window.top.window.callback(); 
//--> 
</script> 

Y en su primera página:

<script type="text/javascript"> 
<!-- 
     function callback() { 
       alert("File loaded!"); 
     } 
//--> 
</script> 

Si su función de devolución de llamada no se llama después de 30 segundos, se puede diga que su pdf no está cargado.


Editar: Su primer archivo (con el iframe):

<html> 
    <head> 
     <script type="text/javascript"> 
     <!-- 
      function callback() { 
       alert("This file doesn't exist"); 
      } 
     //--> 
     </script> 
    </head> 
    <body> 
     <iframe src="load_pdf.php?f=test.pdf" style="width:900px;height:500px;"></iframe> 
    </body> 
</html> 

El segundo (archivo PHP):

<?php 
$file = $_GET['f']; 

if(is_file($file)) { 
    header('Content-type: application/pdf'); 
    readfile($file); 
} 
else { 
    // This file doesn't exist 
    echo ' 
     <script type="text/javascript"> 
     <!-- 
       window.top.window.callback(); 
     //--> 
     </script> 
    '; 
} 
?> 

No se olvide de asegurar el $ _GET [ 'f']

+0

¿Puedes poner algún ejemplo en el violín –

+1

? No creo que esta solución funcione para este escenario en particular, ya que la página dentro del iframe no es HTML, es un documento PDF. – Fenton

Cuestiones relacionadas