Question

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

正在注入的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>

通常我会挂钩窗口加载事件或$（文档）.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文件也被其他地方使用，你可以添加一些通用的功能，以便在执行时通过向它添加类似的内容来调用回调：

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
}

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

4 个答案: