Question

我在网页上有多个Etherpad实例作为iFrame .Etherpad＆＃39; ep_tables插件使用YUI库（近12种不同的JS文件）。这会导致网站加载大量时间，因为这些YUI文件是为每个etherpad实例加载的。

所以情况就是这样 - 我想为第一个etherpad实例加载一次这些YUI文件，而剩下的实例不应加载YUI文件，并以某种方式使用已经加载的YUI文件。我如何实现这个目标？

PS：每个etherpad实例都是iFrame，YUI库是iFrame内部html的一部分。

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创建回调中调用它。

你换了一个：

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

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

创建iFrame时，需要专门查找。如果页面上有其他iframe。

尽管如此，在很多方面都毫无意义。依靠缓存。

如何在浏览器中只加载一次多个javascript库？

2 个答案: