Possible to share javascript imports across iframes? - Stack Overflow

admin管理员组

文章数量:1289381

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

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

• javascript
• iframe

Share Improve this question Follow edited Jul 5, 2012 at 16:51 asutherland asked Jul 5, 2012 at 16:20 asutherlandasutherland 2,96944 gold badges3838 silver badges5151 bronze badges 2

• 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 Commented Jul 5, 2012 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 Commented Jul 5, 2012 at 16:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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

Certain environments generate iframe urls you can't control. In CRM Dynamics, for example, I had the same thought. I have mon 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;
}

本文标签： Possible to share javascript imports across iframesStack Overflow