كيف يمكنني إطلاق حدث عند انتهاء تحميل إطار iframe في jQuery؟

StackOverflow https://stackoverflow.com/questions/30005

  •  09-06-2019
  •  | 
  •  

سؤال

لا بد لي من تحميل ملف PDF داخل الصفحة.

من الناحية المثالية، أرغب في الحصول على صورة GIF متحركة يتم تحميلها ويتم استبدالها بمجرد تحميل ملف PDF.

هل كانت مفيدة؟

المحلول

أنا متأكد تمامًا من أنه لا يمكن القيام بذلك.

إلى حد كبير أي شيء آخر غير PDF يعمل، حتى فلاش.(تم الاختبار على Safari وFirefox 3 وIE 7)

سيئة للغاية.

نصائح أخرى

هل جربت:

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

هذا ما فعله لي (ليس 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>

أتمنى أن يساعدك هذا.

أحاول هذا ويبدو أنه يعمل من أجلي:http://jsfiddle.net/aamir/BXe8C/

ملف pdf أكبر:http://jsfiddle.net/aamir/BXe8C/1/

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

هل حاولت .ready بدلا من ذلك؟

لقد جربت طريقة مبتكرة لهذا، ولم أختبر هذا لمحتوى 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 الخاصة بك ALLOWTRANSPARENCY="false"

تتمثل الفكرة في إظهار الرسوم المتحركة للتحميل في قسم المجمع حتى يتم تحميل iframe بعد تحميله، وسيغطي iframe الرسوم المتحركة للتحميل.

جربها.

يبدو أن استخدام كل من jquery Load و Ready لا يتطابقان حقًا عندما يكون iframe جاهزًا حقًا.

انتهى بي الأمر بفعل شيء كهذا

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

حيث يكون #loader عبارة عن قسم تم وضعه بشكل مطلق أعلى إطار iframe باستخدام صورة gif الدوارة.

@Alex فصيل عبد الواحد هذا هو المشكل.ماذا لو كان في الخاص بك iframe كان لديك مستند html يشبه:

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

بالتأكيد اختراق، لكنه قد يعمل مع Firefox.على الرغم من أنني أتساءل عما إذا كان سيتم إطلاق حدث التحميل مبكرًا جدًا في هذه الحالة.

إليك ما أقوم به لأي إجراء وهو يعمل في 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>

اضطررت إلى إظهار أداة تحميل أثناء تحميل ملف 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>');
    }
    });

أنا أعرض محمل.بمجرد أن أتأكد من أن العميل يمكنه رؤية أداة التحميل الخاصة بي، سأستدعي طريقة أدوات تحميل onCompllet التي تقوم بتحميل إطار iframe.يحتوي Iframe على حدث "onLoad".بمجرد تحميل ملف PDF، فإنه يطلق حدث onloat حيث أقوم بإخفاء أداة التحميل :)

الجزء المهم:

يحتوي iFrame على حدث "onLoad" حيث يمكنك القيام بما تحتاجه (إخفاء أدوات التحميل وما إلى ذلك)

إذا كان بإمكانك توقع ظهور واجهة الفتح/الحفظ للمتصفح للمستخدم بمجرد اكتمال التنزيل، فيمكنك تشغيل هذا عند بدء التنزيل:

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

عندما ينبثق مربع الحوار أعلى الصفحة، سيتم تشغيل حدث التمويه.

نظرًا لأنه بعد تحميل ملف 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;
}

الحل الذي طبقته على هذا الموقف هو ببساطة وضع صورة تحميل مطلقة في DOM، والتي سيتم تغطيتها بطبقة iframe بعد تحميل iframe.

يجب أن يكون مؤشر z لإطار iframe (مؤشر z للتحميل + 1)، أو أعلى بقليل.

على سبيل المثال:

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

آمل أن يكون هذا مفيدًا إذا لم يكن هناك حل جافا سكريبت.أعتقد أن CSS هو أفضل ممارسة لهذه المواقف.

أطيب التحيات.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top