(编辑:jimmy 日期: 2024/10/12 浏览:2)
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="/UploadFiles/2021-04-02/jquery-1.4.4.js"><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="/UploadFiles/2021-04-02/jquery-1.4.4.js"><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