javascript - saber - obtener contenido de un iframe jquery

Detecta si el contenido del iframe se ha cargado correctamente

Question

Tengo un widget que contiene un iframe. El usuario puede configurar la url de este iframe, pero si la url no se pudo cargar (no existe o el usuario no tiene acceso a Internet), entonces el iframe debe conmutar por error a una página predeterminada sin conexión.

La pregunta es, ¿cómo puedo detectar si el iframe podría estar cargado o no? Intenté suscribirme al evento ''cargar'' y, si este evento no se activa después de un tiempo, conmutaré a failover, pero esto solo funciona en Firefox, ya que IE y Chrome activan el evento ''cargar'' cuando la ''Página no encontrada'' es desplegado.

Answer 1

¿Qué hay de comprobar si la url está disponible y solo entonces establecer la URL real del iframe? por ejemplo, con JQuery

var url = "google.com"
var loading_url = "/empty.html"
document.getElementById("iframe").src = loading_url;
$.ajax({
url: url,
type: ''GET'',
complete: function(e, xhr, settings){
if(e.status === 200){
document.getElementById("iframe").src = url;
}
}
});

Editar: Esto no parece funcionar entre dominios, el código de estado es 0 en esos casos.

Answer 2

Actualmente, los navegadores tienen una serie de limitaciones de seguridad que lo mantienen alejado del contenido de un iframe (si no es de su dominio).

Si realmente necesita esa funcionalidad, debe crear una página de servidor que tenga que funcionar como un proxy, que reciba la url como parámetro, pruebe si es una url válida y redirecciona o muestra la página de error.

Answer 3

Después de los incendios de carga, puede eliminar el contenido del iframe para ver si contiene una página útil o no. Tendría que hacer que este navegador especifique desafortunadamente porque todos muestran un mensaje diferente de "página no encontrada".

Para obtener más información, consulte http://roneiv.wordpress.com/2008/01/18/get-the-content-of-an-iframe-in-javascript-crossbrowser-solution-for-both-ie-and-firefox/

Answer 4

Encontré el siguiente enlace a través de Google: http://wordpressapi.com/2010/01/28/check-iframes-loaded-completely-browser/

No sé si resuelve el problema ''Página no encontrada''.

<script type="javascript">
var iframe = document.createElement("iframe");
iframe.src = "http://www.your_iframe.com/";
if (navigator.userAgent.indexOf("MSIE") > -1 && !window.opera) {
iframe.onreadystatechange = function(){
if (iframe.readyState == "complete"){
alert("Iframe is now loaded.");
}
};
} else {
iframe.onload = function(){
alert("Iframe is now loaded.");
};
}
</script>

No lo he probado yo mismo, así que no sé si funciona. ¡Buena suerte!

Answer 5

Si controla el contenido del iframe, el iframe puede enviar un mensaje al padre.

 parent.postMessage(''iframeIsDone'', ''*'');

La devolución de llamada principal escucha el mensaje.

 var attachFuncEvent = "message";
var attachFunc = window.addEventListener ;
if (! window.addEventListener) {
attachFunc = window.attachEvent;
attachFuncEvent = "onmessage";
}
attachFunc(attachFuncEvent, function(event) {
if (event.data == ''iframeIsDone'') { // iframe is done callback here
}
});

Answer 6

Si tiene control sobre el contenido del iframe (por ejemplo, puede agregar código arbitrario a la página), puede intentar implementar una función especial en cada uno de ellos, luego en su página, llama a esa función y detecta un error (a través de window.onerror handler) si la función llamada vía eval falla porque la página no se cargó.

Aquí hay un código de ejemplo: http://www.tek-tips.com/viewthread.cfm?qid=1114265&page=420