6

I have a web application that has several iframes that all need to import the same javascript library (eg jquery).

Is there a way to only load it once and somehow share that data across all the iframes? I'd rather not have my page load slowly because it is loading the same JS files once for every iframe.

Thanks!

EDIT: People are saying you can't share data from an iframe, but what if the js imports are all in a namespace say NAMESPACE and then the iframe does something like NAMESPACE = parent.NAMESPACE

asutherland
  • 2,849
  • 4
  • 32
  • 50
  • iframes are independent pages, they cannot "share" data any more than the browser cache. So it _should_ cache it unless you are using timestamped QueryStrings. – TheZ Jul 05 '12 at 16:23
  • well the file will be in cache [if headers are set correctly] so that is not the slow issue. It could take time to read it into memory, but in modern browsers that is not an issue. – epascarello Jul 05 '12 at 16:23

3 Answers3

3

Assuming that you src the same URI, and you have sane cache control headers, then the JS will be cached and not re-downloaded for each frame.

That said, if you really wanted to, you could load it in the top frame, and then access everything via the parent object.

For example: http://dorward.me.uk/tmp/frames/top.html

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
3

If all frames are loading the same js file, modern browsers (chrome, firefox, IE) should simply load the same file from the cache...so you don't have to re-load the same file over and over again. If your page load times are long, consider minifying your javascript (making your js files smaller through the use of another program)...this can greatly reduce load times.

vinnybad
  • 2,102
  • 3
  • 19
  • 29
  • I read your update. I wouldn't update the namespace like that. I would just rely on the browser to cache these files. You should also consider using something like requirejs so your modules get loaded only once. Please up-vote and/or mark the answer if you found it useful. – vinnybad Aug 08 '12 at 15:07
0

Certain environments generate iframe urls you can't control. In CRM Dynamics, for example, I had the same thought. I have common web resources, but when included as a dependency of another resource the library ended up downloading again. I wanted the library to cross the wire once but that didn't happen.

Even if you manage getting your library to load once as I eventually did you'll have issues sharing it across iframes. The host objects and types (e.g. classes) are unique to the iframe.

function isHTMLDocument(el){ //impure
  return el instanceof HTMLDocument;
}

function dropdown(values){ //impure
   const el = document.createElement("select");
   ...
   return el;
}

If you call methods against foreign iframes hopefully you can see the problem. HTMLDocument in the context where your library loads will not be the same as HTMLDocument in a foreign iframe. While isHTMLDocument will work on document in the local environment it won't work in the foreign one.

Same with document and many libraries bake document into functions to avoid requiring you to pass it in again and again. Unfortunately, due to each environment being its own sandbox, host-environment tainted functions are effectively broken.

Only pure functions would work when used in a foreign context like an iframe document.

function is(el, type){ //pure
  return el instanceof type;
}

function dropdown(document, values){ //pure
   const el = document.createElement("select");
   ...
   return el;
}
Mario
  • 6,572
  • 3
  • 42
  • 74