div - javascript find iframe
¿Cómo verificar si el iframe está cargado o tiene un contenido? (9)
Tengo un iframe con id = "myIframe" y aquí mi código para cargar su contenido:
$(''#myIframe'').attr("src", "my_url");
El problema es que a veces lleva mucho tiempo cargar y, a veces, se carga muy rápido. Entonces debo usar la función "setTimeout":
setTimeout(function(){
if (//something shows iframe is loaded or has content)
{
//my code
}
else
{
$(''#myIframe'').attr("src",""); //stop loading content
}
},5000);
Todo lo que quiero saber es cómo averiguar si un iFrame está cargado o si tiene contenido. Usar iframe.contents().find() no funcionará. No puedo usar iframe.load(function(){}) .
Cuando se carga un iFrame, inicialmente contiene el documento #, por lo que es mejor verificar el estado de carga comprobando lo que hay ahora.
if ($(''iframe'').contents().find(''body'').children().length > 0) {
// is loaded
} else {
// is not loaded
}
La opción más fácil:
<script type="text/javascript">
function frameload(){
alert("iframe loaded")
}
</script>
<iframe onload="frameload()" src=...>
No estoy seguro si puedes detectar si está cargado o no, pero puedes disparar un evento una vez que se haya terminado de cargar:
$(function(){
$(''#myIframe'').ready(function(){
//your code (will be called once iframe is done loading)
});
});
EDITAR: Como señaló Jesse Hallett, esto siempre se disparará cuando el iframe haya cargado, incluso si ya lo ha hecho. Entonces, esencialmente, si el iframe ya se ha cargado, la devolución de llamada se ejecutará de inmediato.
Prueba esto.
<script>
function checkIframeLoaded() {
// Get a handle to the iframe element
var iframe = document.getElementById(''i_frame'');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Check if loading is complete
if ( iframeDoc.readyState == ''complete'' ) {
//iframe.contentWindow.alert("Hello");
iframe.contentWindow.onload = function(){
alert("I am loaded");
};
// The loading is complete, call the function we want executed once the iframe is loaded
afterLoading();
return;
}
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
window.setTimeout(checkIframeLoaded, 100);
}
function afterLoading(){
alert("I am here");
}
</script>
<body onload="checkIframeLoaded();">
Puede usar el evento de load del iframe para responder cuando se carga el iframe.
document.querySelector(''iframe'').onload = function(){
console.log(''iframe loaded'');
};
Esto no le dirá si se cargó el contenido correcto: para verificarlo, puede inspeccionar el contentDocument .
document.querySelector(''iframe'').onload = function(){
var iframeBody = this.contentDocument.body;
console.log(''iframe loaded, body is: '', body);
};
Verificación de
contentDocumentno funcionará si el iframesrcapunta a un dominio diferente desde donde se ejecuta su código.
Tuve el mismo problema y, para agregarlo, necesitaba verificar si el iframe se carga independientemente de la política entre dominios. Estaba desarrollando una extensión de Chrome que inyecta ciertas secuencias de comandos en una página web y muestra algún contenido de la página principal en un iframe. Intenté seguir el enfoque y esto funcionó perfecto para mí.
PD: en mi caso, tengo control sobre el contenido en iframe pero no en el sitio principal. (Iframe está alojado en mi propio servidor)
Primero:
Crear un iframe con un atributo de data- como (esta parte estaba en script inyectado en mi caso)
<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>
Ahora en el código iframe, usa:
var sourceURL = document.referrer;
window.parent.postMessage(''1'',sourceURL);
Ahora volvamos a la secuencia de comandos inyectados según mi caso:
setTimeout(function(){
var myIframe = document.getElementById(''myiframe'');
var isLoaded = myIframe.prop(''data-isloaded'');
if(isLoaded != ''1'')
{
console.log(''iframe failed to load'');
} else {
console.log(''iframe loaded'');
}
},3000);
y,
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
if(event.origin !== ''https://someWebsite.com'') //check origin of message for security reasons
{
console.log(''URL issues'');
return;
}
else {
var myMsg = event.data;
if(myMsg == ''1''){
$("#myiframe").prop(''data-isload'', ''1'');
}
}
}
Puede que no responda exactamente la pregunta, pero de hecho es un posible caso de esta pregunta que he resuelto con este método.
Un método realmente excelente es usar jQuery AJAX. El marco principal se vería así:
<iframe src="iframe_load.php" style="width: 100%; height: 100%;"></iframe>
El archivo iframe_load.php cargaría la biblioteca jQuery y un JavaScript que intenta cargar la URL de destino en un AJAX GET:
var the_url_to_load = "http://www.your-website.com" ;
$.ajax({
type: "GET",
url: the_url_to_load,
data: "",
success: function(data){
// if can load inside iframe, load the URL
location.href = the_url_to_load ;
},
statusCode: {
500: function() {
alert( ''site has errors'' ) ;
}
},
error:function (xhr, ajaxOptions, thrownError){
// if x-frame-options, site is down or web server is down
alert( ''URL did not load due to x-frame-options'' ) ;
} });
IMPORTANTE El destino debe contener el encabezado "Access-Control-Allow-Origin". Ejemplo en PHP:
HEADER( "Access-Control-Allow-Origin: *" ) ;
amablemente uso:
$(''#myIframe'').on(''load'', function(){
//your code (will be called once iframe is done loading)
});
Actualicé mi respuesta a medida que los estándares cambiaban.
en mi caso, era un marco de origen cruzado y no estaba cargando a veces. la solución que funcionó para mí es: si se carga con éxito, entonces, si prueba este código:
var iframe = document.getElementsByTagName(''iframe'')[0];
console.log(iframe.contentDocument);
no le permitirá acceder a contentDocument y arrojar un error de origen cruzado. Sin embargo, si el marco no se carga correctamente, contentDocument devolverá un objeto #document