How do I fire an event when a iframe has finished loading in jQuery?


I have to load a PDF within a page.

Ideally I would like to have a loading animated gif which is replaced once the PDF has loaded.


The solution I have applied to this situation is to simply place an absolute loading image in the DOM, which will be covered by the iframe layer after the iframe is loaded.

The z-index of the iframe should be (loading's z-index + 1), or just higher.

For example:

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

Hope this helps if no javaScript solution did. I do think that CSS is best practice for these situations.

Best regards.

By : ElaAle

Since after the pdf file is loaded, the iframe document will have a new DOM element <embed/>, so we can do the check like this:

    window.onload = function () {

    //creating an iframe element
    var ifr = document.createElement('iframe');

    // 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) {

            //You can do print here: ifr.contentWindow.print();
    }, 100); 

    ifr.src = src;
By : 令狐葱

If you can expect the browser's open/save interface to pop up for the user once the download is complete, then you can run this when you start the download:

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

When the dialogue pops up on top of the page, the blur event will trigger.

By : Ethan

This video can help you solving your question :)
By: admin