Does jQuery inside an IFRAME affect the parent window's jQuery?

Question

I've read about "Can javascript running inside an iframe affect the main page?" and understand that it is possible from within an IFRAME to modify JavaScript variables of the parent window.

What I do not yet understand is how/whether different jQuery versions can co-exist if my IFRAME is not out to be manipulating the parent window.

I have to support different browser like IE 9+, Firefox, Google Chrome.

My question:

Does an IFRAME with a higher jQuery affect in any way the jQuery behaviour of the parent HTML page?

(The IFRAME comes from a different domain than the main page)

You mentioned that the iframe come from different domains. Isnt'it ?! so the approach you need to use is far more complex that usual. Look at this for example: http://madskristensen.net/post/iframe-cross-domain-javascript-calls — pinturic, Jul 27 '15 at 07:19
@pinturic Thanks. I do _not_ want to manipulate. I want to know if both jQuery versions can co-exist _without_ affecting each other. — Uwe Keim, Jul 27 '15 at 07:20

score 10 · Accepted Answer · edited May 23 '17 at 12:10

I've read about "Can javascript running inside an iframe affect the main page?" and understand that it is possible from within an IFRAME to modify JavaScript variables of the parent window

This is true, but only if the frame is on the same domain as the parent. And even then, the iframe would have to explicitly access the variable using window.parent or similar.

If the iframe is on a different domain, you can't modify the parent anyway.

Does an IFRAME with a higher jQuery affect in any way the jQuery behaviour of the parent HTML page?

jQuery stores itself as window.jQuery (or window.$) which is a reference to the current document's window only*, this will not modify the parent iframe in any way either on same-domain or cross-domain. So you can have different versions of jQuery on both the inner & outer frames and they will not conflict.

_{* This links to a superb answer from TJ Crowder which explains the differences of the window object in terms of <iframe> elements - much better than I ever could.}

score 3 · Answer 2 · answered Jul 27 '15 at 08:36

Does an IFRAME with a higher jQuery affect in any way the jQuery behaviour of the parent HTML page?

As answered by @RGraham, by itself this will cause no conflict and they can happily co-exist as they belong to different browsing contexts.

However, theoretically there may be edge cases where your usage may affect it.

Consider a scenario where both your iframe sources are in the same domain (perhaps different apps which you want to seamlessly surface). Say, your parent app references older version of jQuery and the child app references a newer version. Now, you can call methods on the parent version from your child. Perhaps a use-case where you cannot change anything in the parent app, but want to just use method calls from the child. In such a case, you have to be careful not to end up calling a defunct method on the parent.

For example,

Parent (Referencing older version of jQuery)

<html>
    <head><script src="jquery-1.4.2.min.js"></script></head>
    <body>
        <h1>Parent</h1>
        <input id="chk" type="checkbox">
        <iframe src="child.html"></iframe>
    </body>
</html>

Child (Referencing newer version of jQuery)

<html>
    <head>
        <script src="jquery-2.1.1.min.js"></script>
        <script>
            (function($) {
                console.log("Attr: " + parent.$("#chk").attr("checked"));
                console.log("Prop from child: " + $("#chk", parent.document).prop("checked"));
                console.log("Prop from parent: " + parent.$("#chk").prop("checked"));
            } (window.jQuery));
        </script>
    </head>
    <body>
        <h1>Child</h1>
    </body>
</html>

Result:

Attr: false
Prop from child: false
Uncaught TypeError: parent.$(...).prop is not a function

As you can see, that the last test will throw up. This is because the method prop is not available with the older version.

In short, you have to be careful to avoid such edge cases and use the document content context rather than the Javascript context.

Thanks a lot for your valuable input! – Uwe Keim Jul 27 '15 at 08:41 — Uwe Keim, Jul 27 '15 at 08:41

Does jQuery inside an IFRAME affect the parent window's jQuery?

2 Answers2