javascript - off - ¿Cómo disparo un evento cuando un iframe ha terminado de cargarse en jQuery?
onclick jquery ejemplos (13)
Tengo que cargar un PDF dentro de una página.
Idealmente, me gustaría tener un GIF animado de carga que se reemplaza una vez que el PDF se haya cargado.
@Alex aw eso es un fastidio. ¿Qué iframe si en su iframe tiene un documento html que se ve así:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>
Definitivamente un truco, pero podría funcionar para Firefox. Aunque me pregunto si el evento de carga se desencadenaría demasiado pronto en ese caso.
Dado que después de que se carga el archivo pdf, el documento iframe tendrá un nuevo elemento DOM <embed/> , por lo que podemos hacer el control de esta manera:
window.onload = function () {
//creating an iframe element
var ifr = document.createElement(''iframe'');
document.body.appendChild(ifr);
// making the iframe fill the viewport
ifr.width = ''100%'';
ifr.height = window.innerHeight;
// continuously checking to see if the pdf file has been loaded
self.interval = setInterval(function () {
if (ifr && ifr.contentDocument && ifr.contentDocument.readyState === ''complete'' && ifr.contentDocument.embeds && ifr.contentDocument.embeds.length > 0) {
clearInterval(self.interval);
console.log("loaded");
//You can do print here: ifr.contentWindow.print();
}
}, 100);
ifr.src = src;
}
El uso de ambos, jquery Load y Ready, ninguno parecía coincidir realmente cuando el iframe estaba VERDADERAMENTE listo.
Terminé haciendo algo como esto
$(''#iframe'').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});
Donde #loader es un div completamente posicionado encima del iframe con un gif giratorio.
Esto es lo que hago para cualquier acción y funciona en Firefox, IE, Opera y Safari.
<script type="text/javascript">
$(document).ready(function(){
doMethod();
});
function actionIframe(iframe)
{
... do what ever ...
}
function doMethod()
{
var iFrames = document.getElementsByTagName(''iframe'');
// what ever action you want.
function iAction()
{
// Iterate through all iframes in the page.
for (var i = 0, j = iFrames.length; i < j; i++)
{
actionIframe(iFrames[i]);
}
}
// Check if browser is Safari or Opera.
if ($.browser.safari || $.browser.opera)
{
// Start timer when loaded.
$(''iframe'').load(function()
{
setTimeout(iAction, 0);
}
);
// Safari and Opera need something to force a load.
for (var i = 0, j = iFrames.length; i < j; i++)
{
var iSource = iFrames[i].src;
iFrames[i].src = '''';
iFrames[i].src = iSource;
}
}
else
{
// For other good browsers.
$(''iframe'').load(function()
{
actionIframe(this);
}
);
}
}
</script>
Esto lo hizo por mí (no en pdf, sino en otro contenido "resistente a la onload "):
<iframe id="frameid" src="page.aspx"></iframe>
<script language="javascript">
iframe = document.getElementById("frameid");
WaitForIFrame();
function WaitForIFrame() {
if (iframe.readyState != "complete") {
setTimeout("WaitForIFrame();", 200);
} else {
done();
}
}
function done() {
//some code after iframe has been loaded
}
</script>
Espero que esto ayude.
Estoy bastante seguro de que no se puede hacer.
Prácticamente todo lo que no sea PDF funciona, incluso Flash. (Probado en Safari, Firefox 3, IE 7)
Demasiado.
Estoy intentando esto y parece estar funcionando para mí: http://jsfiddle.net/aamir/BXe8C/
Archivo pdf más grande: http://jsfiddle.net/aamir/BXe8C/1/
Has probado:
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});
Intenté un enfoque inmediato para esto, no probé esto para el contenido PDF, pero funcionó para el contenido normal basado en HTML, aquí está cómo:
Paso 1 : Envuelve tu Iframe en un envoltorio div
Paso 2 : agrega una imagen de fondo a tu contenedor de div:
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}
Paso 3 : en tu etiqueta iframe agrega ALLOWTRANSPARENCY="false"
La idea es mostrar la animación de carga en el div envoltura hasta que el iframe se cargue después de haber cargado el iframe que cubriría la animación de carga.
Darle una oportunidad.
La solución que he aplicado a esta situación es simplemente colocar una imagen de carga absoluta en el DOM, que será cubierta por la capa de iframe después de que se cargue el iframe.
El índice z del iframe debe ser (índice z de carga + 1) o simplemente más alto.
Por ejemplo:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }
Espero que esto ayude si no hubiera una solución javaScript. Creo que CSS es la mejor práctica para estas situaciones.
Atentamente.
Si puede esperar que la interfaz de abrir / guardar del navegador aparezca para el usuario una vez que se complete la descarga, puede ejecutar esto cuando inicie la descarga:
$( document ).blur( function () {
// Your code here...
});
Cuando el diálogo aparece en la parte superior de la página, se desencadena el desenfoque.
Tuve que mostrar un cargador mientras el pdf en iFrame se está cargando, así que lo que se me ocurre:
loader({href:''loader.gif'', onComplete: function(){
$(''#pd'').html(''<iframe onLoad="loader.close();" src="pdf" width="720px" height="600px" >Please wait... your report is loading..</iframe>'');
}
});
Estoy mostrando un cargador. Una vez que estoy seguro de que el cliente puede ver mi cargador, estoy llamando al método de cargadores de paquetes que carga un iframe. Iframe tiene un evento "onLoad". Una vez que se carga el PDF, se desencadena el evento onloat donde oculto el cargador :)
La parte importante:
iFrame tiene el evento "onLoad" donde puede hacer lo que necesita (ocultar cargadores, etc.)
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});
lo has probado. ¿Ya estás?