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

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

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

废话废话
//“sourceList”是在上面的abunchOfsuff.js中定义的，但在执行时它不可用。
$（“输入自动完成”）。自动完成({
资料来源：sourceList，
最小长度：2
});

通常我只会挂接到一个窗口加载事件或$（document）.ready（）或其他什么，但在这种情况下，窗口和文档已经被完全加载，现在我们正在添加额外的内容

一种可能的方法是在调用中加入一个递归setTimeout调用，该调用将一直启动，直到引用的javascript可用为止，但这非常糟糕

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

谢谢

您还可以在成功回调中使用并执行

自动完成

：

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

您还可以在成功回调中使用并执行

自动完成

：

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

---

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

如果使用“标准”脚本标记插入，则可以查看

onload

事件（IE中的

onreadystatechange

）

---

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

如果使用“标准”脚本标记插入，则可以查看

onload

事件（IE中的

onreadystatechange

）

---

您在这里所做的错误不是等待DOM加载

如果将.autocomplete更改为仅在通过

$（document）.ready加载DOM后执行，则它将执行abunchofsuff.js

像这样：

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

您在这里所做的错误不是等待DOM加载

如果将.autocomplete更改为仅在通过
$（document）.ready加载DOM后执行，则它将执行abunchofsuff.js

像这样：

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

如果您控制该文件，那么当它第一次执行时，您可以从中调用其他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) {}

这将允许多个回调。一个回调的简单版本如下所示：

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

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
}

如果您控制该文件，那么当它第一次执行时，您可以从中调用其他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) {}

这将允许多个回调。一个回调的简单版本如下所示：

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

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
}

你确定吗？按照您的方式，在下载并提供
abunchofsuff.js
之前，即使是
div
也不会被渲染？所以它只在DOM就绪时执行？你确定吗？按照您的方式，在下载并提供
abunchofsuff.js
之前，即使是
div
也不会被渲染？所以它只在DOM就绪时执行？我使用Jquery执行$.post调用来检索内容，然后使用.html（）方法将html和JS放入容器div。我使用Jquery执行$.post调用来检索内容，然后使用.html（）方法将html和JS放入容器div。在我的情况下，DOM已经加载。在页面加载之后，这些内容就会被添加到页面中，因此document.ready事件早就不存在了。那么为什么不执行外部javascript呢？一旦dom准备好，JavaScript就被执行了。在我的例子中，dom已经被加载了。在页面加载之后，这些内容就会被添加到页面中，因此document.ready事件早就不存在了。那么为什么不执行外部javascript呢？dom准备好后，JavaScript就被执行了..我控制它，但它是一个包含多个不同页面使用的一些常见功能的include文件。我不想将任何特定于页面的逻辑烧录到通用include文件中。您可以让它查找全局回调变量，并仅在该全局变量存在时调用该回调。然后，您将向包含的JS文件中添加更多通用功能，以便在需要时使用，在不需要时不做任何事情。有关详细信息，请参阅我在答案中添加的内容。我控制它，但它是一个包含多个不同页面使用的一些常见功能的包含文件。我不想将任何特定于页面的逻辑烧录到通用include文件中。您可以让它查找全局回调变量，并仅在该全局变量存在时调用该回调。然后，您将向包含的JS文件中添加更多通用功能，以便在需要时使用，在不需要时不做任何事情。有关详细信息，请参见我在答案中添加的内容。