在远程Javascript加载后执行本地Javascript

Execute local Javascript after remote javascript loads?

本文关键字：Javascript 执行 加载      更新时间：2023-09-26

我有一个页面，我使用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>

通常我只会钩子到一个窗口加载事件或$(document).ready()之类的，但在这个例子中，窗口和文档已经完全加载，现在我们添加了额外的内容。

一种可能是放入一个递归的setTimeout调用，它会一直触发，直到引用的javascript可用，但这是相当丑陋的。

那么是否有任何干净的方法来捕获被引用的javascript已经加载的事件并在那个时候执行代码?

谢谢

您也可以使用getScript并在成功回调中执行autoComplete:

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

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

如果你使用"标准"脚本标签插入，你可以去观察onload事件(onreadystatechange在IE中)。

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
        }
    };

你在这里做错的是没有等待DOM加载。

如果你改变你的。autocomplete只执行一次DOM是通过$(document).ready加载它将执行ABunchOfStuff.js

: 

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

如果您控制了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
}
相关文章：