代码之家 › 专栏 › 技术社区 › Omer van Kloeten

javascript的document.write内联脚本执行顺序

browser cross-browser javascript

Omer van Kloeten · 技术社区 · 16 年前

我有下面的脚本,其中第一个和第三个 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首次显示 在期间 只有这样才能显示之前和之后 .

我遇到过 an article that states 我不是第一个遇到这件事的人,但这几乎不能让我感觉更好。

有人知道我如何在所有浏览器中设置确定性的顺序,或者像其他所有理智的浏览器一样入侵IE吗?

告诫 :代码段是一个非常简单的repro。它是在服务器上生成的,第二个脚本是唯一可以更改的。这是一个很长的脚本,原因是前后有两个脚本,所以浏览器将缓存它们,代码的动态部分将尽可能小。它也可能在同一个页面中出现多次,生成的代码不同。

7 回复 | 直到 16 年前

Timothy Lee Russell 11 年前

post on the subject of asynchronous script loading

Essential JavaScript: the top five script loaders

Omer van Kloeten 16 年前

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

Prestaul 16 年前

this presentation

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;

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

Dustman 16 年前

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

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

<!-- some html -->
<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'>during[" + fish + "] = function(){alert('During!' + fish);}</sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='during.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'></sc" + "ript>");
</script>
<!-- some other html -->
<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'>during[" + fish + "] = function(){alert('During!' + fish);}</sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='during.js'></sc" + "ript>");
document.write("<script language='javascript' type='text/javascript' src='after.js'></sc" + "ript>");
</script>

Victor 16 年前

http://www.phpied.com/javascript-include-ready-onload/

PhiLho 16 年前

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

alert("Before");
callGeneratedContent();

alert("After");

wit 16 年前

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