Question

I have a use case that I am experimenting with – sandboxing many different JS libraries to hidden iframes. In the site, there can be many widgets, all from the same domain, that may require different version of js libraries. To prevent global conflicts i thought it would be interesting to place all of their required libraries into iframes. So in one iframe I may have jQuery 1.7.1, but in others there may be something older. What I would like to do is to have the code running on each iframe be able to make changes to the main window. I was able to make this work by tweaking the “document” variable in jQuery source to point at “var document = top.document.

Using this approach I was able to execute, in an iframe, $(“body”).append(‘test”) and have it modify the parent document.

Can anyone suggest a better approach to doing something like this? or a better sandbox approach?

Answer 1

If you don’t want to edit the jQuery, I believe this works:

$(document, parent.window.document).contents().find('body').append('test');

This way, you could use the jQuery lib from within the iframe as well, but if you’re hiding them anyway your solution is likely more ideal for your purposes.