Jquery iframe ready

Question

I have one iframe in my page and i'm submiting my form to that iframe so after iframe finished loading i need to fire a function each time iframe have finished loading contents.

I've tried using ready and load but nothing is working, can any one give me some example?

EDIT Also when i'm submiting my browser shows me that page is loading how can i remove that?

possible duplicate of [$(document).ready and iframe content](http://stackoverflow.com/questions/1182031/document-ready-and-iframe-content) — epascarello, Jan 21 '12 at 18:05
and http://stackoverflow.com/questions/164085/javascript-callback-when-iframe-is-finished-loading and http://stackoverflow.com/questions/205087/jquery-ready-in-a-dynamically-inserted-iframe and http://stackoverflow.com/questions/30005/how-do-i-fire-an-event-when-a-iframe-has-finished-loading-in-jquery (see second answer). If not, say what's different from those cases. — Marcelo Diniz, Jan 21 '12 at 18:08

Luca Borrione · Accepted Answer · 2012-01-21T18:28:52.040

1

You need to specify the function to be fired within the new iframe content

<html>
    <head>  
        <script src="jquery-1.7.1.min.js"></script>
        <script>
            $(document).ready(function()
            {
                console.log('this is loaded');
            });
        </script>
    </head>
    <body>
        THE RESPONSE OF YOUR FORM ACTION
    </body>
    </html>

Or post your iframe code and we can try to fix it

No way to hide the fact the browser is loading new content when submitting, as long as I can see. Have you tried to use a div instead of the iframe? This would be mush easier IMHO and the loading would be hidden if I can remember right.

edited Jan 21 '12 at 18:28

answered Jan 21 '12 at 18:23

Luca Borrione

16,324
8
52
66

1

Thank you for your answer i solved it with onload="" event now the only problem that's left is that browser is showing loading stuff, and no i can't use div i'm uploading files via iframe – Linas Jan 21 '12 at 18:30
so i can post my data to div? – Linas Jan 21 '12 at 18:34
I'm glad you solved one part of your goal. For the second part have a look here http://stackoverflow.com/questions/3623361/how-to-hide-page-loading-transferring-data-indicators-and-spinners-caused-by – Luca Borrione Jan 21 '12 at 18:40
Of course you can by using ajax. Just google for an example. Type `Simple Ajax Example` and you will have some stuff – Luca Borrione Jan 21 '12 at 18:44

score 0 · Answer 2 · answered Nov 04 '15 at 16:57

You have a couple options, depending on where your Javascript lives:

You can put your .ready() javascript on the iframe's source webpage (a good option if the parent webpage, the one that contains the iframe, doesn't need to know what events are going on inside the iframe):
```
$(document).ready(function(){
    console.log('My webpage loaded!');
});
```

Or, you can put your .load() JS on the parent webpage like this:

var win = document.getElementById('myiframe').contentWindow || iframe;
$(win).load(function(){
    console.log('The iframe on my webpage loaded');
});

Jquery iframe ready

2 Answers2