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.