Bir sayfaya bir PDF yüklemem gerekiyor.
İdeal olarak, PDF yüklendikten sonra değiştirilen bir yükleme animasyonlu gif'e sahip olmak istiyorum.
Bir sayfaya bir PDF yüklemem gerekiyor.
İdeal olarak, PDF yüklendikten sonra değiştirilen bir yükleme animasyonlu gif'e sahip olmak istiyorum.
Yanıtlar:
Bunun yapılamayacağından oldukça eminim.
PDF'nin çalışmasından başka hemen hemen her şey, Flash bile. (Safari, Firefox 3, IE 7'de test edilmiştir)
Çok kötü.
Denedin mi:
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});
$(function({})böylece çerçeve önce yüklenir. Ama sonuç için umutlanmıyorum. Chrome 25 Mac
Bu benim için yaptı (pdf değil, ancak başka bir " onloaddirençli" içerik):
<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>
Bu yardımcı olur umarım.
setTimeout(WaitForIFrame, 200);
Bunu deniyorum ve benim için çalışıyor gibi görünüyor: http://jsfiddle.net/aamir/BXe8C/
Daha büyük pdf dosyası: http://jsfiddle.net/aamir/BXe8C/1/
Loading PDF...ancak sayfayı yenilediğimde dedim PDF Loaded!. Ama bu url'ler için çalışıyor gibi görünüyor :) bu yüzden benim için çok faydalı. Teşekkürler!
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});
bunun yerine .hazırda denedin mi?
Buna ezber bozan bir yaklaşımı denedim, bunu PDF içeriği için test etmedim ancak normal HTML tabanlı içerik için işe yaradı, şöyle:
1. Adım : Iframe'inizi bir div sarmalayıcıya sarın
Adım 2 : Div sarmalayıcınıza bir arka plan resmi ekleyin:
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}
3. Adım : ur iframe etiketi ekleyin ALLOWTRANSPARENCY="false"
Buradaki fikir, iframe yüklendikten sonra yüklenene kadar sarmalayıcı div'de yükleme animasyonunu göstermektir, iframe yükleme animasyonunu kapsayacaktır.
Bir şans ver.
Hem jquery Load hem de Ready'nin kullanılması, iframe GERÇEKTEN hazır olduğunda ikisi de gerçekten eşleşmiyor gibi görünüyordu.
Böyle bir şey yaptım
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});
Burada #loader, döndürücü gif ile iframe'in üstüne kesinlikle yerleştirilmiş bir div'dir.
@Alex aw bu bir serseri. Ya iframeşuna benzeyen bir html belgeniz varsa:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>
Kesinlikle bir hack, ancak Firefox için işe yarayabilir. Bu durumda yükleme olayının çok erken patlayıp başlamayacağını merak etsem de.
İFrame'de pdf yüklenirken bir yükleyici göstermem gerekiyordu, bu yüzden şunu buldum:
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>');
}
});
Bir yükleyici gösteriyorum. Müşterinin yükleyicimi görebildiğinden emin olduktan sonra, bir iframe yükleyen onCompllet yükleyiciler yöntemini çağırıyorum. Iframe'de "yüklenen" olay var. PDF yüklendikten sonra, yükleyiciyi gizlediğim onloat olayını tetikler :)
Önemli kısım:
iFrame, ihtiyacınız olanı yapabileceğiniz "onLoad" etkinliğine sahiptir (yükleyicileri gizleme vb.
İşte herhangi bir eylem için yaptığım şey Firefox, IE, Opera ve Safari'de çalışıyor.
<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>
İndirme işlemi tamamlandıktan sonra tarayıcının açma / kaydetme arayüzünün kullanıcı için açılmasını bekliyorsanız, indirmeyi başlattığınızda bunu çalıştırabilirsiniz:
$( document ).blur( function () {
// Your code here...
});
Diyalog sayfanın üst kısmında açıldığında, bulanıklık olayı tetiklenir.
Pdf dosyası yüklendikten sonra, iframe belgesi yeni bir DOM öğesine sahip olacağından <embed/>kontrolü şu şekilde yapabiliriz:
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;
}
Bu duruma uyguladığım çözüm, DOM'a, iframe yüklendikten sonra iframe katmanı tarafından kapsanacak olan mutlak bir yükleme görüntüsü yerleştirmektir.
İframe'in z-endeksi (yüklemenin z-endeksi + 1) veya daha yüksek olmalıdır.
Örneğin:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }
Umarım javaScript çözümü olmazsa bu yardımcı olur. CSS'nin bu durumlar için en iyi uygulama olduğunu düşünüyorum.
Saygılarımla.