How to put all of the javascript loaded through ajax or jquery.load in a non-global child scope

Question

I'm trying to get around iframe by using ajax/jquery.load() and inject a third party page on my site (CORS requirements are not a issues here as the third party sets the appropriate CORS response headers).

So my question is: Let's say that the main host site loads jquery 1.x and a bunch of other libs. And let's say that the third party page loads jquery 2.x and some other conflicting libraries with the main site.

How can I refactor my JS on the third party page so that it's not loadedin JS global scope but in a shielded child scope.

Can I wrap everything in function(){}?? Including the jquery libs etc? If so how do I access the methods/vars in this child scope on the third party page?

Let me know if I need to provide any more details...

Answer 1

iframes by default load an entire document on their own, and are pretty much shielded to everything, you can allow modals/popup/etc with the sandbox attribute, if none specified it will just show content, and won't interact with the upper layer.

To access the function inside an iframe , you can:

document.getElementById("resultFrame").contentWindow.Reset()

This will run the Reset() Global Function inside the iframe with resultFrame ID.