Bagaimana cara mengaktifkan acara ketika iframe selesai dimuat di jQuery?

95

Saya harus memuat PDF dalam satu halaman.

Idealnya saya ingin memuat gif animasi yang diganti setelah PDF dimuat.

javascript jquery Alex Andronov
sumber

Jawaban:

38

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.

Antti Kissaniemi
sumber
FWIW, semuanya (bahkan PDF) berfungsi untuk saya dengan Chrome di OS X.
pkaeding
Ya, ini berfungsi di Chrome tetapi tidak di IE. Jika aplikasi ada di web, itu juga harus berfungsi di IE.
Robert Smith
214

Sudahkah Anda mencoba:

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});
travis
sumber
19
+1 karena meskipun ini tampaknya tidak berfungsi untuk memuat PDF di iframe, ini berguna untuk jenis konten lainnya.
Cory House
3
+1 Tidak persis seperti yang ingin diketahui oleh penanya asli (terkait dengan pdf), tetapi jawaban ini cocok dengan pertanyaan "Bagaimana cara mengaktifkan acara ketika iframe selesai dimuat di jQuery?" . Terima kasih
Harvey Darvey
Belum mencoba ini dengan PDF tetapi ini akan berjalan dengan sempurna untuk URL normal.
Bob-ob
Saya menggunakan ini di dalam $(function({})sehingga bingkai dimuat terlebih dahulu. Tetapi saya tidak mendapatkan hasil yang diharapkan. Chrome 25 Mac
William Entriken
Ini tidak berfungsi untuk memuat pdf di iframe. Diuji di IE 11.
Robert Smith
7

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.

Yi Jiang
sumber
7
Argumen string setTimeout () harus dihindari:setTimeout(WaitForIFrame, 200);
Stefan Majewsky
7

Saya mencoba ini dan sepertinya berhasil untuk saya: http://jsfiddle.net/aamir/BXe8C/

File pdf yang lebih besar: http://jsfiddle.net/aamir/BXe8C/1/

Aamir Afridi
sumber
1
Tidak jauh berbeda dari jawaban oleh @travis tetapi saya akan memberi +1 karena penggunaan yang elegan dari perubahan src src dan css. Saya dapat melihat seseorang setidaknya memalsukan loader yang bagus melakukannya dengan cara itu.
Anthony Hatzopoulos
Peristiwa pemuatan dijalankan sebelum PDF dimuat sepenuhnya.
etlds
Mencoba tautan Anda di OSX dengan Chrome terbaru dan pada pemuatan halaman pertama, itu tidak berfungsi, disimpan Loading PDF...tetapi ketika saya menyegarkan halaman, kata PDF Loaded!. Tapi ini sepertinya berfungsi dengan url :) jadi ini sangat berguna bagi saya. Terima kasih!
GabLeRoux
Ini tidak berfungsi jika file disetel untuk diunduh, alih-alih dirender di iframe.
Deringkan
Ini tidak bekerja di IE 11. Menyimpan "Memuat PDF ...". Saya mencari solusi yang juga berfungsi di IE 11.
Marc
6 
$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

Sudahkah Anda mencoba. Sudah?

keithics
sumber
Metode ini tidak akan berfungsi seperti yang diharapkan. Dari dokumen JQuery: "Metode .ready () hanya dapat dipanggil pada objek jQuery yang cocok dengan dokumen saat ini, sehingga selektor dapat dihilangkan." Kedengarannya seperti itu akan diaktifkan setelah $ (dokumen) tidak peduli selektor yang digunakan.
Cazuma Nii Cavalcanti
Saya cukup yakin ini adalah teori kosong.
Barney
Ulangi jawaban sebelumnya!
SyntaxRules
Seperti yang dinyatakan orang lain, saya menguji ini dan tidak berhasil. Ready dipanggil pada dokumen siap, bukan iframe ... Gunakan opsi On Load.
Greg
5

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.

Michael Lu
sumber
4

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.

Chris Marisic
sumber
2

@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.

travis
sumber
itulah yang saya cari :(
Aamir Afridi
1

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.)

rinchik
sumber
0

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>
pengguna22367
sumber
0

Jika Anda dapat mengharapkan antarmuka buka / simpan browser untuk muncul bagi pengguna setelah unduhan selesai, Anda dapat menjalankannya saat memulai unduhan:

$( document ).blur( function () {
    // Your code here...
});

Saat dialog muncul di atas halaman, peristiwa blur akan terpicu.

Ethan
sumber
0

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;
}
令狐 葱
sumber
0

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.

ElaAle
sumber