Question

我正在开发一个插件，允许将第三方代码注入页面（iframe或直接注入DOM）。

我的问题是“直接注射”，因为我需要确保，我不添加任何＆lt;脚本＆gt;额外的时间，如果我的主页和我正在加载和注入的页面中需要它们。

例如（我不能使用requireJS），我的page.html看起来像这样：

<html>
  <head>
   <script type="text/js" src="jquery.js"></script> // exports window.$
   <script type="text/js" src="foo.js"></script>    // exports window.foo 
  </head>
  <body>
    <!-- things that make foo load anotherPage.html and append its content here -->
  </body>
 </html>

anotherPage.html

 <html>
  <head>
   <script type="text/js" src="foo.js"></script>    // exports window.foo 
  </head>
  <body>
    <!-- stuff that also runs on FOO -->
  </body>
 </html>

页面加载是通过Ajax完成的，当我处理data请求返回的anotherPage.html时，我会在执行此操作后得到所有元素的列表：

    cleanedString = ajaxResponseData
        .replace(priv.removeJSComments, "")
        .replace(priv.removeHTMLComments,"")
        .replace(priv.removeLineBreaks, "")
        .replace(priv.removeWhiteSpace, " ")
        .replace(priv.removeWhiteSpaceBetweenElements, "><");
    // this will return a list with head and body elements
    // e.g. [meta, title, link, p, div, script.foo]
    content = $.parseHTML(cleanedString, true);
    // insert into DOM
    someTarget.append(content);

这就是我试图检测我要附加到文档的脚本是否已经存在的地方。

我无法前往src，因为文件名可能不同，脚本可能托管在其他域上（Access-Control-Allow-Origin正确设置）。我也不知道，我将要追加的脚本是什么以及是否返回了我已定义的全局，我不能/不想使用eval()来查找。

问题：
当我只有“非附加”＆lt; script＆gt;时，有没有办法确定可能返回全局的插件或脚本是否已经“在页面上”。元素可用？

谢谢！

Answer 1

这是我自封闭模块模式的一个例子，我称之为“Sentinel”：

 (function wait(){ 

   if(!self.$){
       if(!wait.waitingJQ){
             wait.waitingJQ=true;
             addScriptTag(JQUERY_URL); 
       }
       return setTimeout(wait, 44);
   } 

   doStuffThatNeedsJquery();

 }());

Sentinel模式可以在任何地方（内部或外部）工作，不关心脚本加载顺序，并且可以使用任何脚本加载库。你可以用相同的方式列出jQuery fork下面的其他内容，只需将你的贪心代码放在sentinel包装函数的底部。

如何在不使用eval（）或requireJS的情况下检测是否已加载插件或脚本？

1 个答案: