DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js 文件引入實現代碼
js 文件引入實現代碼
編輯:關於JavaScript     

也不好麻煩讓他們從新寫一個方法,由於他們都引用了這個AA.js文件,想在這邊在AA.js後執行一個函數自動把jq庫引入,於是想到引入js文件方法:
復制代碼 代碼如下:
getScript : function(s,call){
var el = UI.DC('script');
        if (call) {
            el.onload =el.onreadystatechange=call;
        }
        UI.A(el,'type','text/javascript');
        UI.A(el,'src',s);
        UI.GT(document,'head')[0].appendChild(el);
    }
/*UI.DC為創建對象,UI.A為屬性賦值,GT為getElementsByTagName的簡寫*/

於是這樣執行UI.getScript("js/jquery/jquery-1.4.2.min.js",function(){alert("載入成功")});

結果在IE和ff下確實彈出了載入成功,可當我再HTML中使用jq的時候在IE下怎麼都執行不了,不斷刷新偶爾還能執行,放在服務器上和在客戶端的靜態頁面也有差別,但在火狐下沒有問題.........

於是想到是不是jq文件在載入的時候和html載入是並行的,當jq載入成功之前HTML文件已經執行,於是在html的body結束之時添加
復制代碼 代碼如下:
<script>
alert("html前執行")
</script>

執行發現確實是先彈出hmtl前執行,後彈出載入成功。在火狐下也是這樣。上傳到服務器上時感覺火狐的彈出會同時出現.....

於是開始不解,到底怎麼設置才能確保jq文件載入完之後才能執行html body中的東東,怎麼像在head中添加<script type="text/javascript" src="js/jquery.js"></script>那樣引入文件..
思索總想到以前浏覽一個頁面是他用了一個loading文件引入許多js文件,在html中就可使用這些引入的文件函數,搜索查到了這個js文件內容為:

復制代碼 代碼如下:
var Collapsar = {
Version: '0.0.1',
require: function(libraryName) {
// inserting via DOM fails in Safari 2.0, so brute force approach
document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
},
load: function() {
if((typeof Prototype=='undefined') ||
(typeof Element == 'undefined') ||
(typeof Element.Methods=='undefined') ||
parseFloat(Prototype.Version.split(".")[0] + "." +
Prototype.Version.split(".")[1]) < 1.5)
throw("The Prototype JavaScript framework 1.5.0+ is required");

$A(document.getElementsByTagName("script")).findAll( function(s) {
return (s.src && s.src.match(/loader\.js(\?.*)?$/))
}).each( function(s) {
var path = s.src.replace(/loader\.js(\?.*)?$/,'');
var includes = s.src.match(/\?.*load=([a-z,]*)/);
(includes ? includes[1] : "").split(',').each(
function(include) {
Collapsar.require(path+include+'.js') });
});
}
}
Collapsar.load();


調用的時候為<script type="text/javascript" src="js/loder.js?load=jquery,...,..."></script>這樣等號後面的文件都可引入,其實是這句在關鍵的作用 document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
剛看到有些疑惑write方法不是像文檔內添加內容嗎,內容應該在body標簽中出現啊,實驗發現如果是字符串確實出現在文檔內,當如是script link等標簽就出現在了head內;那在head中添加引用js文件難道和直接在head中一樣載入他們之後才執行body中的內容....他載入和上面添加script有什麼區別啊........

實驗:在AA.js中添加:

UI.getsc=(function(){
document.write('<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>');
})()

讓他自動執行,在body的第一行就引入jq的方法,實驗確實成功了,在IE和在ff一樣都可執行;
有時間繼續實驗...................

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved