加载JavaScript / CSS文件

Question

I load a page with JavaScript and CSS files included in it from multiple iframes embedded in my flex application, are these JavaScript and CSS files loaded multiple times in the browser for each iframe? If yes how can I avoid it or what are the best practices?

Thanks

Answer 1

So here's a test on JSBin: http://jsbin.com/olome5/edit

I loaded in the home page of Google 3 times, using different iframes.

As you can see from the image below, the JS resources were loaded 3 times, even though they were the exact same files -- not loaded from cache. This means that resources brought in through your iframes, at least if they're brought in simultaneously, are all loaded.

How you could avoid this scenario, I'm not sure. Instead of using iframes, you could use AJAX to load the content right into the DOM of your container page, that way, the JS / CSS would only need to be loaded into the container page and it would apply to all elements loaded within.

Of course, this is tricky for JS, because all of the content brought in would then have to have the events re-attached after they were brought in, etc. This can be made easier with something like jQuery, but still isn't a small amount of effort.