Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11
可以看出各個主流浏覽器的行為一致。雖然jQueryUI在服務器延遲了2秒鐘再返回,但是後引入的內聯JavaScript還是等待了2秒,等前面引入的JavaScript執行完畢才執行。這也是著名的JavaScript順序執行的特性。
3. 通過JavaScript添加script標簽(test3.htm)
我們首先定義一個addScript函數,用來引入外部或者內聯JavaScript。test3.htm的頁面源代碼如下:
復制代碼 代碼如下:
<html>
<head>
<title></title>
<script src="./js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
function addScript(url, inline) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.type = 'text/javascript';
if (inline) {
script.text = url;
} else {
script.src = url;
}
head.appendChild(script);
}
$(function () {
addScript('./service.ashx?file=js/jquery-ui.js&delay=2000');
addScript('alert(typeof(jQuery.ui));', true);
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
我們分別在各種浏覽器中測試這個例子:
test3.htm
通過JavaScript添加<script>標簽
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11
可見,通過JavaScript在DOM加載完畢後再引入外部或者內聯JavaScript時,Firefox和Opera的行為一致,能夠確保JavaScript的執行順序和引入順序一致。但是IE8, Chrome, Safari 卻不能保證這個執行順序。
雖然各種浏覽器在確保執行順序方面不盡相同,不過這時的最大好處是多個JavaScript文件能夠並行下載,這在所有浏覽器中行為一致。當然這不是這篇文章的主題,可以Google更多細節。
如何解決各個浏覽器的不一致性,下面提供了兩個解決方案:
4. 方案一,如何在動態添加script標簽時確保執行順序
有時頁面邏輯要求我們必須通過上面的方式動態執行JavaScript,那麼如何確保所有浏覽器下的執行順序(目前只有Firefox和Opera確保執行順序)。
其實解決方案很簡單,我們為函數執行添加一個complete的回調函數就行了。下面的test4.htm給出了具體的解決方案:
復制代碼 代碼如下:
<html>
<head>
<title></title>
<script src="./js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
function addScript(url, inline, callback) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.type = 'text/javascript';
if (inline) {
script.text = url;
} else {
script.src = url;
script.onload = script.onreadystatechange = function () {
if (!script.readyState || script.readyState === 'loaded' || script.readyState === 'complete') {
if (callback) {
callback();
}
script.onload = script.onreadystatechange = null;
};
};
}
head.appendChild(script);
if (inline && callback) {
callback();
}
}
$(function () {
addScript('./service.ashx?file=js/jquery-ui.js&delay=2000', false, function () {
addScript('alert(typeof(jQuery.ui));', true);
});
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
此時所有浏覽器中的行為一致:
test4.htm
通過回調函數解決動態添加JavaScript的順序問題
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11
Firefox 3.6
IE 8
Chrome 10
Safari 4
Opera 11