jQuery load isn't firing

Question

When having the following HTML page (index.html)

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Parent</title>
</head>
<body>
    <iframe src="iframe.html"></iframe>
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
    <script>
        $(function(){
            console.log("document ready");
            $("iframe").on("load", function(){
                console.log("iframe loaded");
            });
        });
    </script>
</body>
</html>

and the following iframe.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Child</title>
</head>
<body>
    <p>Lorem ipsum</p>
</body>
</html>

the console output will look like:

However, the log "iframe loaded" is missing. It seems that .on("load") is not getting fired on the iframe.

Does anyone know why?

Edit:

Of course I am having JavaScript activated (otherwise I wouldn't see any log messages)
I can not edit iframe.html so using postMessage etc. is not a workaround for me
I have tested this in the latest FF (47.0a2) and Chrome (49)

Checked it on chrome aswell. Its Working perfectly. Please Check If the Files are in the same folder. If not then provide the CORRECT PATH — Md. Mohsin Hussain, Mar 21 '16 at 23:07
I've described the cause of this issue and the solution here: http://stackoverflow.com/a/36155560/3894981 — dude, Mar 22 '16 at 13:29

Youcam39 · Answer 1 · 2016-03-20T12:26:44.100

Check if javascript is enabled in your browser

Edit:

or try to replace your index.html code with:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Parent</title>
    <script type="text/javascript">
        function handleOnLoad(el) {
            // el is the actual iframe
            console.log("iframe loaded");
        }
    </script>
</head>
<body>
    <iframe src="iframe.html" onload="handleOnLoad(this)"></iframe>
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
    <script>
        $(function(){
            console.log("document ready");
            $("iframe").on("load", function(){
                // console.log("iframe loaded");
            });
        });
    </script>
</body>
</html>

If I would not, nothing would be printed to the console – user3292653 Mar 20 '16 at 12:07 — user3292653, Mar 20 '16 at 12:07

score 0 · Answer 2 · answered Mar 20 '16 at 11:52

0

The Code is working perfectly . Maybe the path that you provided for iframe is wrong. Check if they are in the same folder

answered Mar 20 '16 at 11:52

Md. Mohsin Hussain

100
7

Where did you tested the code (browser, version, locally or on a server)? – user3292653 Mar 20 '16 at 12:22
@user3292653 I tested it on fiddle using Chrome – Md. Mohsin Hussain Mar 21 '16 at 11:08

Dattatreya Kugve · Answer 3 · 2016-03-21T12:52:58.497

-1

Your code <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script> <script> $(function(){ console.log("document ready"); $("iframe").on("load", function(){ console.log("iframe loaded"); }); }); </script>

has to be inside iframe.html

So your pages look like below post modifications.

index.html

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
    <iframe src="iframe.html"></iframe>

</body>
</html>

iframe.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
        $(function(){
            console.log("document ready");
            $(window).on("load", function(){
                console.log("iframe loaded");
            });
        });
    </script>
</head>
<body>
    <p>Lorem ipsum</p>
</body>
</html>

edited Mar 21 '16 at 12:52

answered Mar 20 '16 at 11:36

Dattatreya Kugve

320
1
4
21

I need to get informed without changing iframe.html – user3292653 Mar 20 '16 at 11:49
Ok you can do this without changing iframe.html. I am suspecting your iframe is being loaded before onload registration because of src attribute.Try removing 'src' attribute from iframe. And add below line after your onload registration. document.frames[0].location.href="iframe.html". This should work – Dattatreya Kugve Mar 20 '16 at 12:06
Normally load events should get fired even if the iframe is already loaded, but you are right. Placing the iframe after the scripts worked for me. However, changing the src is not an option for me. I need to get informed even if it is already loaded. – user3292653 Mar 20 '16 at 12:23
`$("iframe")` won't find any elements to add event handlers to if you put it in the document in the iframe. That document doesn't contain an `iframe` element. – Quentin Mar 20 '16 at 12:29
@Quentin Thanks for pointing out. I forgot to modify while pasting it from question. please see my edits. I have corrected it. However I have provided an alternate solution in my previous comment. – Dattatreya Kugve Mar 20 '16 at 13:51
@user3292653 "Normally load events should get fired even if the iframe is already loaded" I don't think it's true. Have you verified it?. Don't you think firing load event on already loaded DOM is an incorrect behaviour? – Dattatreya Kugve Mar 20 '16 at 14:00
@DattatreyaKugve Normally it wouldn't be true, but just don't fire causes such an issue. Now there is an expense workaround necessary to get informed even if load was already triggered – user3292653 Mar 20 '16 at 18:17

jQuery load isn't firing

3 Answers3