正在使用document.write唯一可能的方式來同步跨瀏覽器跨域加載腳本？

Question

我想模擬天生此行爲：

<script src="console.log.1.js"></script> 
<script>console.log(2)</script> 
<script>console.log(3)</script> 

這登出：

1 
2 
3 

這樣做行不通：

<script> 
var x = document.createElement("script"); 
x.src = "console.log.1.js"; 
x.async = false; 
x.defer = false; 
document.body.appendChild(x); 
console.log("2"); 
console.log("3"); 
</script> 

它登出：

2 
3 
1 

The唯一的辦法，我發現到目前爲止實現它：

<script> 
document.write("<scrip" + "t src='console.log.1.js'></scrip" + "t>"); 
</script> 
<script> 
console.log("2"); 
console.log("3"); 
</script> 

那是真給力外部腳本的同步加載在所有瀏覽器的唯一途徑？爲什麼不設置async = false，推遲= false工作？

UPDATE

僅供參考，如果有人想知道，下面的文件撰寫工作開始（在Chrome ..）：

<script> 
    // http://jsbin.com/avatiw logs "during" 
    document.write('<scrip' + 't>console.log("before");document.write("<scrip" + "t src=\\"http://jsbin.com/avatiw\\"></scrip" + "t>");</scrip' + 't>'); 
    document.write('<scrip' + 't>console.log("after");</scrip' + 't>'); 
</script> 

工程和註銷：

"before" 
"during" 
"after" 

Answer 1

是的，這是強制腳本在頁面解析期間加載的唯一方法。或者至少，我願意相信的唯一方式就是跨瀏覽器。

如果你的腳本是這樣的，我能看到你的想法：

<script> 
var x = document.createElement("script"); 
x.src = "console.log.1.js"; 
x.async = false; 
x.defer = false; 
document.body.appendChild(x); 
</script> 
<script><!-- note the new script element --> 
console.log("2"); 
console.log("3"); 
</script> 

...因爲從理論上講，當解析器碰到script元素，它暫停一切（因爲有可能是document.write語句）並調用JavaScript層。所以你可能會想，在這個時候在body的末尾添加一個script元素將會在兩者之間插入。

但通過appendChild添加script元素是根本上的不同，它是由自然的異步操作（代碼繼續在腳本下載，這是不符合的標記禁止的defer或async屬性script元素的情況下）。我不能指出任何一個規格說明爲什麼，但你看到的行爲正是我所期望的。與標記內嵌的script元素的處理有點特別。

我們可以看到，它的下載軟件，通過比較使用script元素與內嵌內容的結果是問題  —至少在Chrome   —。

使用外部文件（live copy | live source）：

<script> 
console.log("before"); 
(function() { 
    var s = document.createElement("script"); 
    s.src = "http://jsbin.com/avatiw"; // Logs the word "during" 
    document.body.appendChild(s); 
})(); 
</script> 
<script> 
console.log("after"); 
</script> 

結果：

before 
after 
during

使用內嵌腳本（live copy | live source   —請注意，我沒有試圖讓這個跨瀏覽器，它適用於Chrome和Firefox，因爲它們支持script元素上的text屬性）：

<script> 
console.log("before"); 
(function() { 
    var s = document.createElement("script"); 
    s.text = "console.log('during');"; 
    document.body.appendChild(s); 
})(); 
</script> 
<script> 
console.log("after"); 
</script> 

輸出：

before 
during 
after

Answer 2

其實，我發現，使用LazyLoad插件，很適合這種使用情況，即

if (typeof jQuery === 'undefined') 
    LazyLoad.js('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', function() { 
     initialize(); 
    }); 
else 
    initialize();