How to load multiple javascript libraries only once in the browser?

Question

I have multiple Etherpad instances as iFrames on the web page.Etherpad' ep_tables plugin uses YUI libraries(nearly 12 different JS files). This causes a lot of time for the site to load because these YUI files get loaded for every etherpad instance.

So here is the situation - I want to load these YUI files only once for the first etherpad instance while remaining instances should not load YUI files and somehow use the already loaded YUI files.How do I achieve this?

PS: Every etherpad instance is an iFrame and YUI libraries are part of the html inside that iFrame.

The browser should do this for you automagically if the headers being sent from the server for those files are allowing caching (usually by default yes for javascript files) — Kevin B, Apr 10 '15 at 19:13

TechnicalChaos · Answer 1 · 2015-04-10T19:50:57.983

I mean, this script should cache browser side and not be an issue. If you check your network pane of your favourite inspector console, as long as it's loading the same resource from the same place. Most people here ask how NOT to load from cache.

But in the spirit of inventing something pointless, i'd do it something like this:

function addToAllFrames(var scriptName){

    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","scriptName",true);
    xmlhttp.send();
    xmlhttp.onreadystatechange=function(){
       if (xmlhttp.readyState==4 && xmlhttp.status==200){
           script.type = "text/javascript";
           script.src = xmlhttp.responseText;
           var frames= document.getElementsByTagName("iframe");
           for (var x = 0; x < frames.length; x++) {
               frames[x].append(script);
           }
       }
    } 
}

And call it for each script I'd want to pin to the iFrames.

score 0 · Answer 2 · answered Apr 10 '15 at 20:00

If I was being really crazy and new frames were being created uncontrollably. i'd go for something like:

var globalScriptObject={};    
function addToAllFrames(var scriptName){
    if (!globalScriptObject[scriptName].length){
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","scriptName",true);
        xmlhttp.send();
        xmlhttp.onreadystatechange=function(){
           if (xmlhttp.readyState==4 && xmlhttp.status==200){
                 globalScriptObject[scriptName] = xmlhttp.responseText;
           }
        }
    }
     var frames= document.getElementsByTagName("iframe");
     for (var x = 0; x < frames.length; x++) {
        if (!frames[x].getElementsByName(scriptName).length){
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', globalScriptObject[scriptName]);
            script.setAttribute('name', scriptName);
            frames[x].append(script);
         }
     }
}

And call it on the iFrame create callback.

You wrap an:

if (frames[x].hasAttribute("data-YUI"){
}

and <iframe data-YUI="true" src="">

when you create the iFrames, so that there is something to look for specifically. If you had other iframes on the page.

Still, entirely pointless in so many ways. rely on the cache.

How to load multiple javascript libraries only once in the browser?

2 Answers2