Je dois charger un PDF dans une page.
Idéalement, j'aimerais avoir un gif animé qui se charge et qui est remplacé une fois le PDF chargé.
C'est ce que je recherche :(
Réponses
Trop de publicités?
Michael Lu
Points
73
Je n'ai pas encore testé cette approche pour le contenu PDF mais elle a fonctionné pour le contenu HTML normal, voici comment :
Étape 1 : Enveloppez votre Iframe dans un div wrapper
Étape 2 : Ajoutez une image de fond à votre wrapper div :
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}Étape 3 : dans votre balise iframe, ajoutez ALLOWTRANSPARENCY="false"
L'idée est de montrer l'animation de chargement dans la div wrapper jusqu'à ce que l'iframe se charge ; après son chargement, l'iframe couvrira l'animation de chargement.
Essayez-le.
Chris Marisic
Points
11495
En utilisant à la fois jquery Load et Ready, aucun ne semblait vraiment correspondre au moment où l'iframe était VRAIMENT prêt.
J'ai fini par faire quelque chose comme ça
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});Où #loader est un div positionné de façon absolue au-dessus de l'iframe avec un gif en forme de tourniquet.
travis
Points
14676
@Alex aw c'est une déception. Et si dans votre iframe vous aviez un document html qui ressemblait à :
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>Il s'agit d'un piratage, mais cela pourrait fonctionner pour Firefox. Mais je me demande si l'événement de chargement ne se déclencherait pas trop tôt dans ce cas.
rinchik
Points
753
J'ai dû montrer un chargeur pendant le chargement d'un pdf dans une iFrame, et c'est ce que j'ai fait :
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>');
}
});Je montre un chargeur. Une fois que je suis sûr que le client peut voir mon chargeur, j'appelle la méthode onCompllet loaders qui charge un iframe. L'iframe a un événement "onLoad". Une fois le PDF chargé, il déclenche l'événement onloat où je cache le chargeur :)
La partie importante :
iFrame a un événement "onLoad" où vous pouvez faire ce que vous voulez (cacher les chargeurs, etc.).
user22367
Points
79
Voici ce que je fais pour toute action et cela fonctionne dans Firefox, IE, Opera et 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>
