Avoid duplicate Javascript inside iframes

Question

Here is a wireframe to ilustrate the structure of a legacy project that shows some performance issue:

For all dialogs (From jQuery UI) open a new iframe are created and all js from Home are re-downloaded and all objects are re-instanced. Can I create a reference from jQuery from Home to all new iframes and work in each iframe isolated scope?

For example:

[Home scope]

$("#some-el").data('foo', 'bar');
console.log($("#some-el").data('foo')); // results bar

[App1 scope]

//after defined in Home first run
console.log($("#some-el").data('foo')); // results undefined

PS: Remember this is a legacy architeture and all solutions must be consider this scenario.

Answer 1

I've encountered this situation before. One approach is to define some javascript that gets loaded into the iframes that just reroutes any function calls to top.functionCall() instead of containing their actual definition. It becomes very simple if all of your functions are under one namespace, like so:

Parent window js:

var namespace = (function () { 
    // all of your functions are in here as properties of namespace
})();

iframe window js:

var namespace = top.namespace;

One issue with this is any context sensitive functions (functions that rely or operate on the window object) will most likely break.

Answer 2

Actually, if all of these are hosted in the same place, the browser will NOT be downloading the files multiple times. Rather, it will be caching the first result, and then pulling from cache in the second. Iframes are treated as a separate context, so you won't need to worry about variable or form conflicts.

Assuming that downloading the same file twice is your primary concern, then you should be ok there.

An alternative design would be to use AJAX instead of iframed content - but having been where you are in working with legacy apps, I realize how hard that can be to do without real JSON / REST calls available. One thing I've done is changed the views inside the iframes to be "partials," returning only the necessary HTML contents without the HTML head etc., and loading them using $.load(). This gets complex as you will need to execute bindings post-load and carefully track form ID's etc., but it can be done.