Question

我有一个包含在<head>中的脚本foo.js。在体内，我有一个内联脚本。在其中，我想在文档中添加另一个bar.js脚本，该脚本将在内联脚本之前加载和评估。

<html>
  <head>
    <script src="foo.js" type="text/javascript"/>
  </head>
  <body>
    <script type="text/javascript">
      bar()
    </script>
  </body>
</html>

在foo.js中我想添加一个指向bar.js

的脚本

bar.js：

function bar() {
  alert('hi');
}

foo.js的代码应该是什么？

注意：我知道我可以在这个简单的例子中使用onload。但在我的实际情况中，bar.js包含一个多次调用的函数，我希望能够在页面的右侧部分内联这些调用（代码位置）

Answer 1

您有两种选择：

在document.write('<script src="bar.js"></script>')。{/ li>中使用foo.js

动态创建并在头部中插入<script>元素（因为在解析其余部分之前必须加载头部中的脚本，这有效）：

!function(){
    var s = document.createElement('script'),
        currentScript = document.getElementsByTagName('script')[0];
    s.src = "bar.js";
    currentScript.parentNode.insertBefore(s, currentScript);
}()

Answer 2

你能不能使用onload属性来调用你想要的函数。

<body onload"bar()">

Answer 3

让我直截了当地说明......您是否尝试添加一个脚本，该脚本将在包含它的脚本之前运行？这完全没有意义。

我能想到的最接近的是尝试立即运行包含的代码，然后继续执行当前脚本块中的进一步代码。这可以通过获取脚本以通过同步（阻塞）AJAX调用并通过eval运行来实现。这总体上是一个坏主意，应该永远不需要做这样的事情 - 只需把scr

Answer 4

我将使用jQuery的ready函数，当所有依赖项都已加载时将触发...

$(document).ready(function () {
    bar();
});

Answer 5

正如您目前所做的那样，头部的脚本将在第一个评估，然后从身体评估。

但是当加载head脚本时，主体内的脚本还没有被加载。因此，该功能将无法使用。

因此，我知道最好的方法是使用window.onload一旦每个DOM元素（如脚本）都可以进行操作，就会触发代码。

window.onload = function() {
   bar();
}

javascript：添加将在正文脚本之前评估的脚本？

5 个答案: