Как загрузить несколько библиотек JavaScript только один раз в браузере?

Question

У меня есть несколько экземпляров Etherpad в виде iFrames на веб-странице. Плагин Etherpad' ep_tables использует библиотеки YUI (почти 12 различных файлов JS). Это заставляет сайт загружаться много времени, потому что эти файлы YUI загружаются для каждого экземпляра etherpad.

Итак, вот ситуация - я хочу загрузить эти файлы YUI только один раз для первого экземпляра etherpad, в то время как остальные экземпляры не должны загружать файлы YUI и каким-то образом использовать уже загруженные файлы YUI. Как мне этого добиться?

PS: каждый экземпляр etherpad - это iFrame, а библиотеки YUI являются частью HTML внутри этого iFrame.

Answer 1

Я имею в виду, что этот скрипт должен кэшировать браузер и не быть проблемой. Если вы проверите сетевую панель вашей любимой консоли инспектора, если она загружает тот же ресурс из того же места. Большинство людей здесь спрашивают, как НЕ загружать из кеша.

Но в духе изобретения чего-то бессмысленного, я бы сделал это примерно так:

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);
           }
       }
    } 
}

И вызывайте его для каждого сценария, который я бы хотел прикрепить к iFrames.

Answer 2

Если бы я был действительно сумасшедшим, а новые кадры создавались неуправляемо. я бы пошел на что-то вроде:

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);
         }
     }
}

И вызовите его на обратном вызове iFrame create.

Вы заверните:

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

а также <iframe data-YUI="true" src="">

когда вы создаете iFrames, так что есть что искать специально. Если у вас были другие фреймы на странице.

Тем не менее, совершенно бессмысленно во многих отношениях. положиться на кеш.