Devo caricare un PDF all'interno di una pagina.
Idealmente vorrei avere una GIF animata in caricamento che viene sostituita una volta che il PDF è stato caricato.
Devo caricare un PDF all'interno di una pagina.
Idealmente vorrei avere una GIF animata in caricamento che viene sostituita una volta che il PDF è stato caricato.
Risposte:
Sono abbastanza certo che non possa essere fatto.
Praticamente qualsiasi altra cosa oltre al PDF funziona, anche Flash. (Testato su Safari, Firefox 3, IE 7)
Peccato.
Hai provato:
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});$(function({})modo che il telaio venga caricato per primo. Ma non sto ottenendo il risultato sperato. Chrome 25 Mac
Questo lo ha fatto per me (non pdf, ma un altro onloadcontenuto " resistente"):
<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> Spero che questo ti aiuti.
setTimeout(WaitForIFrame, 200);
Lo sto provando e sembra funzionare per me: http://jsfiddle.net/aamir/BXe8C/
File pdf più grande: http://jsfiddle.net/aamir/BXe8C/1/
Loading PDF...Ho provato i tuoi collegamenti su OSX con l'ultimo Chrome e al caricamento della prima pagina, non ha funzionato, mantenuto ma quando ho aggiornato la pagina, ha detto PDF Loaded!. Ma questo sembra funzionare con gli URL :) quindi è molto utile per me. Grazie!
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});hai provato .ready invece?
Ho provato un approccio fuori dagli schemi a questo, non l'ho testato per il contenuto PDF ma ha funzionato per il normale contenuto basato su HTML, ecco come:
Passaggio 1 : avvolgi il tuo Iframe in un wrapper div
Passaggio 2 : aggiungi un'immagine di sfondo al tuo div wrapper:
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}Passaggio 3 : nel tuo tag iframe aggiungi ALLOWTRANSPARENCY="false"
L'idea è di mostrare l'animazione di caricamento nel div wrapper fino a quando l'iframe non viene caricato dopo aver caricato l'iframe coprirà l'animazione di caricamento.
Provaci.
Utilizzando sia jquery Load che Ready, nessuno dei due sembrava corrispondere realmente quando l'iframe era VERAMENTE pronto.
Ho finito per fare qualcosa del genere
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});Dove #loader è un div posizionato in modo assoluto sopra l'iframe con una gif di selezione.
@Alex aw che è un peccato. E se nel tuo iframeavessi un documento html che assomiglia a:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>Sicuramente un hack, ma potrebbe funzionare per Firefox. Anche se mi chiedo se l'evento di caricamento si attiverà troppo presto in quel caso.
Ho dovuto mostrare un caricatore durante il caricamento del pdf in iFrame, quindi cosa mi viene in mente:
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>');
}
});Sto mostrando un caricatore. Una volta che sono sicuro che il cliente può vedere il mio loader, sto chiamando il metodo onCompllet loaders che carica un iframe. Iframe ha un evento "onLoad". Una volta caricato il PDF, si attiva l'evento onloat in cui sto nascondendo il caricatore :)
La parte importante:
iFrame ha un evento "onLoad" in cui puoi fare ciò di cui hai bisogno (nascondi caricatori ecc.)
Ecco cosa faccio per qualsiasi azione e funziona in Firefox, IE, Opera e 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>Se puoi aspettarti che l'interfaccia di apertura / salvataggio del browser venga visualizzata per l'utente una volta completato il download, puoi eseguirla all'avvio del download:
$( document ).blur( function () {
// Your code here...
});Quando il dialogo si apre nella parte superiore della pagina, si attiverà l'evento sfocatura.
Poiché dopo che il file pdf è stato caricato, il documento iframe avrà un nuovo elemento DOM <embed/>, quindi possiamo fare il controllo in questo modo:
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;
}La soluzione che ho applicato a questa situazione è semplicemente posizionare un'immagine di caricamento assoluta nel DOM, che sarà coperta dal livello iframe dopo che l'iframe è stato caricato.
Lo z-index dell'iframe dovrebbe essere (caricamento dello z-index + 1) o semplicemente superiore.
Per esempio:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }Spero che questo aiuti se nessuna soluzione javaScript lo ha fatto. Penso che CSS sia la migliore pratica per queste situazioni.
I migliori saluti.