Avoid duplicate Javascript inside iframes

Question

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

enter image description here

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.

You might be able to re-use app.js and a-lot-of-stuff.js, however jQuery assumes that it is working on a single document. Parts of the library may fail to work properly or at all when trying to use it within an iframe. (document.ready for example) — user400654
– user400654, Commented Jan 23, 2013 at 15:39

jbabey · Accepted Answer · 2013-01-23 15:44:08Z

2

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.

answered Jan 23, 2013 at 15:44

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joshua · Accepted Answer · 2013-01-23 15:43:10Z

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.

Collectives™ on Stack Overflow

Avoid duplicate Javascript inside iframes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related