JavaScript'；s document.write内联脚本执行顺序

我有以下脚本，其中第一个和第三个

document.writeline

是静态的，第二个是生成的：

<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script language='javascript' type='text/javascript'>alert('during');<\/sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

文件。填写（“”）；
文档。写入（“警报（‘期间’；”）；
文件。填写（“”）；

Firefox和Chrome将在之前、期间和之后显示，而Internet Explorer首先在期间显示，然后才显示之前和之后

我认识到我不是第一个遇到这种情况的人，但这几乎不能让我感觉更好

有人知道我如何在所有浏览器中设置确定性顺序，或者让IE像所有其他正常浏览器一样工作吗？

注意事项：代码片段是一个非常简单的复制。它是在服务器上生成的，第二个脚本是唯一需要更改的内容。这是一个很长的脚本，因此前后有两个脚本，以便浏览器缓存它们，并且代码的动态部分将尽可能小。它也可能多次出现在同一页面上，生成的代码不同。

的第25/26张幻灯片介绍了插入脚本的不同方法的特点。这表明IE是唯一一个按顺序执行这些脚本的浏览器。所有其他浏览器将按照加载完成的顺序执行它们。如果一个或多个具有内联js而不是src，则即使IE也不会按顺序执行它们

建议的方法之一是插入新的DOM元素：

var se1 = document.createElement('script');
se1.src = 'a.js';

var se2 = document.createElement('script');
se2.src = 'b.js';

var se3 = document.createElement('script');
se3.src = 'c.js';

var head = document.getElementsByTagName('head')[0]
head.appendChild(se1);
head.appendChild(se2);
head.appendChild(se3);

要生成第二个脚本部分，可以使用脚本生成该内容并传递参数：

se2.src = 'generateScript.php?params=' + someParam;

编辑：不管我的文章怎么说，我的测试表明大多数浏览器都会执行您的文档。如果每个浏览器都有一个src，请按顺序编写脚本，因此，虽然我认为首选上述方法，但您也可以这样做：

<script language="javascript" type="text/javascript">
document.write("<script type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；

再次编辑（回复对我和其他人的评论）：您已经在页面上生成了脚本。无论您在做什么，都可以移动到另一个生成相同代码块的服务器端脚本。如果需要页面上的参数，请将它们传递给查询字符串中的脚本

此外，如果您建议多次生成内联脚本，则可以使用相同的方法：

<script language="javascript" type="text/javascript">
document.write("<script type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params1 + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params2 + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='during.php?params=" + params3 + "'><\/sc" + "ript>");
document.write("<script type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；

然而，这开始看起来好像你在以错误的方式处理这个问题。如果您多次生成一大块代码，那么您可能应该用一个js函数替换它，并用不同的参数调用它…

好的

// During.js
during[fish]();

在

// After.js
alert("After");
fish++

HTML

文件。填写（“”）；
write（“during[“+fish+”]=function（）{alert（'during！'+fish）；}”）；
文件。填写（“”）；
文件。填写（“”）；
文件。填写（“”）；
write（“during[“+fish+”]=function（）{alert（'during！'+fish）；}”）；
文件。填写（“”）；
文件。填写（“”）；

不过，我倾向于同意这种气味开始散发的方式。特别是，为什么不能将“during”编码到一个动态创建的js文件中，并插入它呢

请注意，动态生成的脚本位于第二个文档中的函数中。write。

---

在FF2、IE7中测试不，这是Internet Explorer的行为

如果动态附加脚本，IE、Firefox和Chrome都将以异步方式下载脚本

Firefox和Chrome将等待所有异步请求返回，然后按照脚本在DOM中的附加顺序执行脚本，而IE则按照脚本通过网络返回的顺序执行脚本

由于该警报比外部javascript文件“检索”所需的时间更少，因此这可能解释了您看到的行为

来自克里斯托弗·亨利克森的：

在这个场景中，IE和Firefox将 下载两个脚本，但不在Internet上下载 资源管理器还将在 他们完成下载的顺序 而Firefox下载它们 异步但仍执行它们 按照它们在列表中的附着顺序 多姆

在Internet Explorer中，这表示您的 脚本不能依赖于 一个接一个的执行命令 将因网络而异 交通、缓存等

考虑使用Javascript加载程序。它将允许您指定脚本依赖项和执行顺序，同时异步加载脚本以提高速度，并消除一些浏览器差异

这是一个相当好的概述其中一些：

我使用了RequireJS和LabJS。在我看来，LabJS没有那么固执己见。

代码提供：

<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript'>function callGeneratedContent() { alert('during'); }<\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='before.js'><\x2Fscript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'><\x2Fscript>");
</script>

在after.js中：

alert("After");

---

您必须将生成的行放在第一位，否则FF会抱怨，因为它在看到函数定义之前在.js之前执行。

您可以通过在脚本上定义“onload”（或类似）事件来强制执行秒级执行，并在事件函数中注入下一个事件。 这不是小事，但有很多例子，这里有一个

---

我认为像jQuery或prototype这样的流行库可以对此有所帮助。

我发现了一个更符合我喜好的答案：

<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script defer language='javascript' type='text/javascript'>alert('during');<\/sc" + "ript>");
document.write("<script defer language='javascript' type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

文件。填写（“”）；
文档。写入（“警报（‘期间’；”）；
文件。填写（“”）；

这将延迟在加载期间和之后加载，直到页面完成加载

我想这是我能得到的最好的了。希望有人能给出更好的答案。

怎么样：

<script>
document.write("<script src='before.js'><\/script>");
</script>

<script >
document.write("<script>alert('during');<\/script>");
</script>

<script>
document.write("<script src='after.js'><\/script>");
</script>

文件。填写（“”）；
文档。写入（“警报（‘期间’；”）；
文件。填写（“”）；

“during”是一段很长的脚本，所以我不能将其总结为一个简单的get请求…@Omer:您已经将其总结为一个“simp”

<script language="javascript" type="text/javascript">
document.write("<script language='javascript' type='text/javascript' src='before.js'><\/sc" + "ript>");
document.write("<script defer language='javascript' type='text/javascript'>alert('during');<\/sc" + "ript>");
document.write("<script defer language='javascript' type='text/javascript' src='after.js'><\/sc" + "ript>");
</script>

<script>
document.write("<script src='before.js'><\/script>");
</script>

<script >
document.write("<script>alert('during');<\/script>");
</script>

<script>
document.write("<script src='after.js'><\/script>");
</script>