远程JavaScript加载后执行本地Javascript？

Question

我有一个页面，我正在使用jquery/ajax从另一个组件中拉下一大块HTML/JS并将它注入到页面中。该HTML引用额外的JS文件，并且我需要那些被引用的JS文件在我运行我的JavaScript之前加载。

正被注入的HTML/JS看起来是这样的：

<script type="text/javascript" src="http://myserver/js/ABunchOfStuff.js"></script> 
<div> 
    blah blah blah 
</div> 
<script type="text/javascript"> 
    //"sourceList" is defined in the ABunchOfStuff.js above, but it's not available by the time this executes. 
    $("input#autocomplete").autocomplete({ 
     source: sourceList, 
     minLength: 2 
    }); 
</script> 

通常我会只是挂钩到一个窗口加载事件或$（文件）。就绪（）或什么，但在这如果窗口和文档已经完全加载，现在我们会在事实之后添加更多内容。

有一种可能性是将一个递归setTimeout调用放到引用的javascript可用，但这很丑陋。

那么是否有任何干净的方式来捕获引用的JavaScript事件已被加载，并在当时执行代码？

感谢

Answer 1

您还可以使用getScript，并在成功回调做你autoComplete：

jQuery.getScript('http://myserver/js/ABunchOfStuff.js', function(data, textStatus) { 
     $("input#autocomplete").autocomplete({ 
      source: sourceList, 
      minLength: 2 
     }); 
}); 

Answer 2

最大的问题是，如何你注入这个脚本？

如果使用“标准”脚本标记插入，则可以去看看onload事件（IE中的onreadystatechange）。

var scr = document.createElement('script'); 
    scr.type = 'text/javascript'; 
    scr.src = 'somewhere/somename.js'; 
    scr.onload = scr.onreadystatechange = function() { 
     if(/complete|loaded/.test(scr.readyState)) { 
      // do something 
     } 
     else { 
      // do something 
     } 
    }; 

Answer 3

你在做什么错在这里没有等待DOM加载。

如果您改变.autocomplete只执行一次的DOM加载通过$(document).ready将已经执行了ABunchOfStuff.js

像这样：如果你控制http://myserver/js/ABunchOfStuff.js文件

(function($) { 
    $(document).ready(function() { 
    $("input#autocomplete").autocomplete({ 
     source: sourceList, 
     minLength: 2 
    }); 
    } 
}(jQuery)); 

Answer 4

然后，你可以在第一次执行时调用你的其他JS。由于它在首次加载时以及可用时执行，因此您拥有完美的时间。

如果这个JS文件用于其他地方也一样，当它执行加入这样的事情吧，你可以添加一些通用的功能，它调用回调：

try { 
    if (aBunchOfStuffCallbacks) { 
     for (var i = 0; i < aBunchOfStuffCallbacks.length; i++) { 
      aBunchOfStuffCallbacks[i].call(this); // call callback to announce we're loaded 
     } 
    } catch(e) {} 

而且，当时在任何网络您想aBunchOfStuffCallbacks加载时调用页面，你只需做到这一点：

var aBunchOfStuffCallbacks = []; 
aBunchOfStuffCallbacks.push(myFunc); 
function myFunc() { 
    // put my code here for when aBunchOfStuffCallbacks is loaded 
} 

这将允许多个回调。只是一个回调的简单的版本是这样的：

try { 
    if (aBunchOfStuffCallback) { 
      aBunchOfStuffCallback.call(this); // call callback to announce we're loaded 
     } 
    } catch(e) {} 

而且，它是这样设置的：

var aBunchOfStuffCallbacks = function() { 
    // put my code here for when aBunchOfStuffCallbacks is loaded 
}