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

我有一个页面，我使用jquery / ajax从另一个组件中拉下一大块HTML / JS并将其注入页面。 该HTML引用了其他JS文件，我需要在运行我的javascript之前加载那些引用的JS文件。

正在注入的HTML / JS看起来像这样：

 
 blah blah blah 
  //"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 });  

通常我会挂钩窗口加载事件或$（文档）.ready（）或其他什么，但在这种情况下窗口和文档已经完全加载，现在我们在事后添加其他内容。

一种可能性是放入一个递归的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更改为仅在通过$(document).ready加载DOM后执行，它将执行ABunchOfStuff.js

像这样：

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

Answer 4

如果您控制http：//myserver/js/ABunchOfStuff.js文件，那么您可以在第一次执行时从其中调用其他JS。 因为它在第一次加载时和可用时执行，所以你有完美的时机。

如果这个JS文件也在其他地方使用，你可以添加一些通用的function，以便在执行时通过向它添加类似的东西来调用回调：

 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 }