Menu
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)
336
You can use jQuery to add jQuery effects to your iFrame elements, to change the CSS rules, or even to add content. Above, the script is used to change the background color of the . page element within the frame to white.
When a page is running inside of an iframe, the parent object is different than the window object. You can still access parent from within an iframe even though you can't access anything useful on it. This code will never cause an error even when crossing origins.
The window will get opened by using the iframe, and the communication could be done with the parent window from the child window. To call a parent window function, use the following syntax and also refer to the code given below.
It is called an inline frame because to the user it is all one web page. The child iframe is a complete browsing environment within the parent frame. It can load its own JavaScript and CSS separate from the parent. They can also be refreshed and loaded asynchronously from the parent site.
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.
98
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
