0

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

我的问题是“直接注入”，因为我需要确保，如果在我的主页和我正在加载和注入的页面中需要它们，我不会再添加任何 <scripts> 。

例如（我不能使用 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()用来找出答案，我也不知道。

问题：
当我只有“未附加”的 <script> 元素可用时，是否有任何方法可以确定可能返回全局的插件或脚本是否已经“在”页面上？

谢谢！

4

1 回答 1

1

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

 (function wait(){ 

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

   doStuffThatNeedsJquery();

 }());

哨兵模式可以在任何地方（内部或外部）工作，不关心脚本加载顺序，并且适用于任何脚本加载库。您可以以相同的方式在 jQuery fork 下方列出其他依赖项，只需将您的贪婪代码放在哨兵包装函数的底部即可。

于 2013-05-29T16:20:42.757 回答