Je dois charger un PDF dans une page.
Idéalement, j'aimerais avoir un gif animé de chargement qui est remplacé une fois le PDF chargé.
Je dois charger un PDF dans une page.
Idéalement, j'aimerais avoir un gif animé de chargement qui est remplacé une fois le PDF chargé.
Réponses:
Je suis presque certain que cela ne peut pas être fait.
Presque tout autre chose que PDF fonctionne, même Flash. (Testé sur Safari, Firefox 3, IE 7)
Dommage.
As-tu essayé:
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});
$(function({})pour que le cadre se charge en premier. Mais je n'obtiens pas le résultat espéré. Chrome 25 Mac
Cela l'a fait pour moi (pas de pdf, mais un autre onloadcontenu " résistant"):
<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>
J'espère que cela t'aides.
setTimeout(WaitForIFrame, 200);
J'essaye ceci et semble fonctionner pour moi: http://jsfiddle.net/aamir/BXe8C/
Fichier pdf plus gros: http://jsfiddle.net/aamir/BXe8C/1/
Loading PDF...mais lorsque j'ai actualisé la page, a déclaré PDF Loaded!. Mais cela semble fonctionner avec les urls :) donc c'est très utile pour moi. Merci!
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});
avez-vous essayé .ready à la place?
J'ai essayé une approche prête à l'emploi, je n'ai pas testé cela pour le contenu PDF mais cela a fonctionné pour le contenu HTML normal, voici comment:
Étape 1 : enveloppez votre Iframe dans un emballage div
Étape 2 : Ajoutez une image d'arrière-plan à 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 tag iframe ajouter ALLOWTRANSPARENCY="false"
L'idée est de montrer l'animation de chargement dans le div wrapper jusqu'à ce que l'iframe se charge après avoir chargé l'iframe couvrirait l'animation de chargement.
Essaie.
L'utilisation de jquery Load et Ready ne semblait pas vraiment correspondre lorsque 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 absolument positionné au-dessus de l'iframe avec un gif spinner.
@Alex aw c'est une déception. Et si dans votre iframevous aviez un document html qui ressemblait à:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>Certainement un hack, mais cela pourrait fonctionner pour Firefox. Bien que je me demande si l'événement de chargement se déclencherait trop tôt dans ce cas.
J'ai dû montrer un chargeur pendant le chargement du pdf dans iFrame, alors ce que je propose:
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. Iframe a un événement "onLoad". Une fois le PDF chargé, il déclenche un événement à flot où je cache le chargeur :)
La partie importante:
iFrame a un événement "onLoad" où vous pouvez faire ce dont vous avez besoin (masquer les chargeurs, etc.)
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>Si vous pouvez vous attendre à ce que l'interface d'ouverture / d'enregistrement du navigateur apparaisse pour l'utilisateur une fois le téléchargement terminé, vous pouvez l'exécuter lorsque vous démarrez le téléchargement:
$( document ).blur( function () {
// Your code here...
});Lorsque le dialogue apparaît en haut de la page, l'événement de flou se déclenche.
Puisqu'après le chargement du fichier pdf, le document iframe aura un nouvel élément DOM <embed/>, nous pouvons donc faire la vérification comme ceci:
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 solution que j'ai appliquée à cette situation est de simplement placer une image de chargement absolu dans le DOM, qui sera couverte par la couche iframe après le chargement de l'iframe.
L'index z de l'iframe doit être (index z du chargement + 1), ou juste supérieur.
Par exemple:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }J'espère que cela aide si aucune solution javaScript ne l'a fait. Je pense que CSS est la meilleure pratique pour ces situations.
Meilleures salutations.