ฉันจะเริ่มเหตุการณ์ได้อย่างไรเมื่อ iframe โหลดใน jQuery เสร็จแล้ว

Question 1

ฉันต้องโหลด PDF ภายในหนึ่งหน้า

ตามหลักการแล้วฉันต้องการโหลด gif แบบเคลื่อนไหวซึ่งจะถูกแทนที่เมื่อ PDF โหลดแล้ว

Question 2

ฉันค่อนข้างมั่นใจว่ามันไม่สามารถทำได้

สวยอย่างอื่นมากกว่างาน PDF แม้แต่ Flash (ทดสอบบน Safari, Firefox 3, IE 7)

เลวร้ายเกินไป.

Question 3

คุณได้ลอง:

$("#iFrameId").on("load", function () {
    // do something once the iframe is loaded
});

Question 4

สิ่งนี้ทำเพื่อฉัน (ไม่ใช่ pdf แต่เป็นonloadเนื้อหาที่ "ทน" อีกอัน):

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

หวังว่านี่จะช่วยได้

Question 5

ฉันกำลังลองสิ่งนี้และดูเหมือนว่าจะได้ผลสำหรับฉัน: http://jsfiddle.net/aamir/BXe8C/

ไฟล์ pdf ที่ใหญ่ขึ้น: http://jsfiddle.net/aamir/BXe8C/1/

Question 6

$("#iFrameId").ready(function (){
    // do something once the iframe is loaded
});

คุณลองแล้วหรือยัง

Question 7

ฉันลองใช้วิธีนอกกรอบในสิ่งนี้ฉันไม่ได้ทดสอบสิ่งนี้สำหรับเนื้อหา PDF แต่มันใช้งานได้กับเนื้อหาที่ใช้ HTML ปกตินี่คือวิธีการ:

ขั้นตอนที่ 1 : ห่อ iframe ของคุณในกระดาษห่อ div

ขั้นตอนที่ 2 : เพิ่มภาพพื้นหลังให้กับกระดาษห่อ div ของคุณ:

.wrapperdiv{
  background-image:url(img/loading.gif);
  background-repeat:no-repeat;
  background-position:center center; /*Can place your loader where ever you like */
}

ขั้นตอนที่ 3 : ในการเพิ่มแท็ก iframe ของ ur ALLOWTRANSPARENCY="false"

แนวคิดคือการแสดงภาพเคลื่อนไหวการโหลดใน wrapper div จนกว่า iframe จะโหลดหลังจากโหลด iframe จะครอบคลุมภาพเคลื่อนไหวการโหลด

ให้มันลอง.

Question 8

การใช้ทั้ง jquery Load และ Ready ดูเหมือนจะไม่ตรงกันจริงๆเมื่อ iframe พร้อมใช้งานจริง

จบลงด้วยการทำอะไรแบบนี้

$('#iframe').ready(function () {
    $("#loader").fadeOut(2500, function (sender) {
        $(sender).remove();
    });
});

โดย #loader คือ div ที่อยู่ในตำแหน่งที่แน่นอนเหนือ iframe ด้วย spinner gif

Question 9

@ Alex Aw นั่นเป็นคนเกียจคร้าน จะเกิดอะไรขึ้นถ้าในของiframeคุณคุณมีเอกสาร html ที่ดูเหมือน:

<html>
  <head>
    <meta http-equiv="refresh" content="0;url=/pdfs/somepdf.pdf" />
  </head>
  <body>
  </body>
</html>

แน่นอนแฮ็ค แต่อาจใช้ได้กับ Firefox แม้ว่าฉันจะสงสัยว่าเหตุการณ์โหลดจะเริ่มทำงานเร็วเกินไปในกรณีนั้น

Question 10

ฉันต้องแสดงตัวโหลดในขณะที่ pdf ใน iFrame กำลังโหลดดังนั้นสิ่งที่ฉันคิดขึ้น:

    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>');
    }
    });

ฉันกำลังแสดงรถตักดิน เมื่อฉันแน่ใจว่าลูกค้าสามารถเห็นตัวโหลดของฉันฉันกำลังเรียกใช้เมธอดตัวโหลดคอมเพลตที่โหลด iframe iframe มีเหตุการณ์ "onLoad" เมื่อโหลด PDF แล้วมันจะทริกเกอร์เหตุการณ์ onloat ที่ฉันซ่อนตัวโหลด :)

ส่วนสำคัญ:

iFrame มีเหตุการณ์ "onLoad" ที่คุณสามารถทำสิ่งที่ต้องการได้ (ซ่อนรถตัก ฯลฯ )

Question 11

นี่คือสิ่งที่ฉันทำเพื่อการกระทำใด ๆ และใช้ได้ใน Firefox, IE, Opera และ 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>

Question 12

หากคุณสามารถคาดหวังว่าอินเทอร์เฟซเปิด / บันทึกของเบราว์เซอร์จะปรากฏขึ้นสำหรับผู้ใช้เมื่อการดาวน์โหลดเสร็จสิ้นคุณสามารถเรียกใช้สิ่งนี้ได้เมื่อคุณเริ่มการดาวน์โหลด:

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

เมื่อกล่องโต้ตอบปรากฏขึ้นที่ด้านบนของหน้าเหตุการณ์เบลอจะเริ่มขึ้น

Question 13

เนื่องจากหลังจากโหลดไฟล์ pdf แล้วเอกสาร iframe จะมีองค์ประกอบ DOM ใหม่<embed/>ดังนั้นเราจึงสามารถตรวจสอบได้ดังนี้:

    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;
}

Question 14

วิธีแก้ปัญหาที่ฉันใช้กับสถานการณ์นี้คือเพียงแค่วางรูปภาพโหลดแบบสัมบูรณ์ใน DOM ซึ่งจะถูกปกคลุมด้วยเลเยอร์ iframe หลังจากโหลด iframe

ดัชนี z ของ iframe ควรเป็น (z-index + 1 ของการโหลด) หรือสูงกว่านั้น

ตัวอย่างเช่น:

.loading-image { position: absolute; z-index: 0; }
.iframe-element { position: relative; z-index: 1; }

หวังว่านี่จะช่วยได้หากไม่มีโซลูชัน javaScript ฉันคิดว่า CSS เป็นแนวทางปฏิบัติที่ดีที่สุดสำหรับสถานการณ์เหล่านี้

ขอแสดงความนับถืออย่างสูง.