Muszę załadować plik PDF na stronie.
Idealnie chciałbym mieć ładowany animowany gif, który jest zastępowany po załadowaniu pliku PDF.
Muszę załadować plik PDF na stronie.
Idealnie chciałbym mieć ładowany animowany gif, który jest zastępowany po załadowaniu pliku PDF.
Odpowiedzi:
Jestem prawie pewien, że nie da się tego zrobić.
Działa praktycznie wszystko inne niż PDF, nawet Flash. (Testowane w Safari, Firefox 3, IE 7)
Szkoda.
Czy próbowałeś:
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});$(function({})aby rama ładowała się jako pierwsza. Ale nie osiągam oczekiwanego wyniku. Chrome 25 Mac
Zrobiło to dla mnie (nie pdf, ale inna „ onloadodporna” zawartość):
<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> Mam nadzieję że to pomoże.
setTimeout(WaitForIFrame, 200);
Próbuję tego i wydaje się, że działa dla mnie: http://jsfiddle.net/aamir/BXe8C/
Większy plik pdf: http://jsfiddle.net/aamir/BXe8C/1/
Loading PDF...ale kiedy odświeżyłem stronę, powiedział PDF Loaded!. Ale to wydaje się działać z adresami URL :), więc jest to dla mnie bardzo przydatne. Dzięki!
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});czy próbowałeś już zamiast tego?
Wypróbowałem niestandardowe podejście do tego, nie testowałem tego pod kątem zawartości PDF, ale zadziałało to w przypadku normalnej zawartości HTML, oto jak:
Krok 1 : Umieść element iframe w opakowaniu div
Krok 2 : Dodaj obraz tła do opakowania div:
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}Krok 3 : dodaj tag iframe ur ALLOWTRANSPARENCY="false"
Chodzi o to, aby pokazać animację ładowania w opakowującym elemencie DIV, dopóki element iframe nie zostanie załadowany po załadowaniu, a element iframe zakryje animację ładowania.
Spróbuj.
Używanie obu jquery Load i Ready nie wydawało się tak naprawdę pasować, gdy iframe był NAPRAWDĘ gotowy.
W końcu zrobiłem coś takiego
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});Gdzie #loader to absolutnie umieszczony element div nad elementem iframe z gifem typu spinner.
@Alex aw to bummer. A co iframeby było, gdybyś miał w swoim dokumencie HTML, który wyglądałby tak:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>Zdecydowanie hack, ale może działać w przeglądarce Firefox. Chociaż zastanawiam się, czy w takim przypadku zdarzenie ładowania uruchomiłoby się zbyt szybko.
Musiałem pokazać program ładujący podczas ładowania pliku PDF w iFrame, więc to, co wymyśliłem:
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>');
}
});Pokazuję ładowarkę. Gdy upewnię się, że klient widzi mój program ładujący, wzywam metodę onCompllet, która ładuje element iframe. Element iframe zawiera zdarzenie „onLoad”. Po załadowaniu PDF wywołuje zdarzenie onloat, w którym ukrywam moduł ładujący :)
Ważna część:
iFrame ma zdarzenie „onLoad”, w którym możesz robić to, czego potrzebujesz (ukrywać programy ładujące itp.)
Oto, co robię dla każdej akcji i działa w przeglądarkach Firefox, IE, Opera i 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>Jeśli możesz oczekiwać, że po zakończeniu pobierania pojawi się dla użytkownika interfejs otwierania / zapisywania przeglądarki, możesz go uruchomić po rozpoczęciu pobierania:
$( document ).blur( function () {
// Your code here...
});Gdy okno dialogowe pojawi się na górze strony, nastąpi rozmycie.
Ponieważ po załadowaniu pliku pdf dokument iframe będzie miał nowy element DOM <embed/>, więc możemy sprawdzić w ten sposób:
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;
}Rozwiązaniem, które zastosowałem w tej sytuacji, jest po prostu umieszczenie obrazu wczytywania absolutnego w DOM, który zostanie zakryty przez warstwę iframe po załadowaniu iframe.
Indeks z elementu iframe powinien wynosić (indeks z ładowania + 1) lub po prostu wyższy.
Na przykład:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }Mam nadzieję, że to pomoże, jeśli żadne rozwiązanie javaScript nie zadziałało. Myślę, że CSS to najlepsza praktyka w takich sytuacjach.
Z poważaniem.