Saya harus memuat PDF dalam satu halaman.
Idealnya saya ingin memuat gif animasi yang diganti setelah PDF dimuat.
Saya harus memuat PDF dalam satu halaman.
Idealnya saya ingin memuat gif animasi yang diganti setelah PDF dimuat.
Jawaban:
Saya cukup yakin bahwa itu tidak dapat dilakukan.
Hampir semua hal selain PDF berfungsi, bahkan Flash. (Diuji di Safari, Firefox 3, IE 7)
Sangat buruk.
Sudahkah Anda mencoba:
$("#iFrameId").on("load", function () {
// do something once the iframe is loaded
});$(function({})sehingga bingkai dimuat terlebih dahulu. Tetapi saya tidak mendapatkan hasil yang diharapkan. Chrome 25 Mac
Ini berhasil untuk saya (bukan pdf, tetapi onloadkonten "tahan" lainnya):
<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> Semoga ini membantu.
setTimeout(WaitForIFrame, 200);
Saya mencoba ini dan sepertinya berhasil untuk saya: http://jsfiddle.net/aamir/BXe8C/
File pdf yang lebih besar: http://jsfiddle.net/aamir/BXe8C/1/
Loading PDF...tetapi ketika saya menyegarkan halaman, kata PDF Loaded!. Tapi ini sepertinya berfungsi dengan url :) jadi ini sangat berguna bagi saya. Terima kasih!
$("#iFrameId").ready(function (){
// do something once the iframe is loaded
});Sudahkah Anda mencoba. Sudah?
Saya mencoba pendekatan out of the box untuk ini, saya belum menguji ini untuk konten PDF tetapi berhasil untuk konten berbasis HTML normal, begini caranya:
Langkah 1 : Bungkus Iframe Anda dengan pembungkus div
Langkah 2 : Tambahkan gambar latar belakang ke pembungkus div Anda:
.wrapperdiv{
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center center; /*Can place your loader where ever you like */
}Langkah 3 : di tag iframe Anda tambahkan ALLOWTRANSPARENCY="false"
Idenya adalah untuk menampilkan animasi pemuatan di div pembungkus sampai iframe dimuat setelah dimuat, iframe akan menutupi animasi pemuatan.
Cobalah.
Menggunakan jquery Load dan Ready tidak ada yang terlihat benar-benar cocok ketika iframe BENAR-BENAR siap.
Saya akhirnya melakukan sesuatu seperti ini
$('#iframe').ready(function () {
$("#loader").fadeOut(2500, function (sender) {
$(sender).remove();
});
});Di mana #loader adalah div yang benar-benar diposisikan di atas iframe dengan gif pemintal.
@Alex aw itu menyedihkan. Bagaimana jika di Anda iframeAnda memiliki dokumen html yang terlihat seperti:
<html>
<head>
<meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
</head>
<body>
</body>
</html>Benar-benar peretasan, tetapi mungkin berhasil untuk Firefox. Meskipun saya bertanya-tanya apakah peristiwa beban akan menyala terlalu cepat dalam kasus itu.
Saya harus menunjukkan loader saat pdf di iFrame sedang dimuat jadi apa yang saya hasilkan:
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>');
}
});Saya menunjukkan loader. Setelah saya yakin bahwa pelanggan dapat melihat pemuat saya, saya memanggil metode pemuat onCompllet yang memuat iframe. Iframe memiliki acara "onLoad". Setelah PDF dimuat, itu memicu acara onloat di mana saya menyembunyikan loader :)
Bagian penting:
iFrame memiliki acara "onLoad" di mana Anda dapat melakukan apa yang Anda butuhkan (menyembunyikan pemuat, dll.)
Inilah yang saya lakukan untuk tindakan apa pun dan berfungsi di Firefox, IE, Opera, dan 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>Karena setelah file pdf dimuat, dokumen iframe akan memiliki elemen DOM baru <embed/>, jadi kita bisa melakukan pengecekan seperti ini:
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;
}Solusi yang saya terapkan untuk situasi ini adalah dengan menempatkan gambar pemuatan absolut di DOM, yang akan ditutupi oleh lapisan iframe setelah iframe dimuat.
Z-index dari iframe harus (memuat z-index + 1), atau lebih tinggi.
Sebagai contoh:
.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }Semoga ini bisa membantu jika tidak ada solusi javaScript. Menurut saya, CSS adalah praktik terbaik untuk situasi ini.
Salam Hormat.