jQuery 支援 JavaScript 檔案的動態載入,只需調用 getScript() 方法即可。假設有一個 JavaScript 檔案,路徑為 js/books.js,現在,我們可以寫如下的程式碼,動態將其載入:
其中第二個參數函式於載入完成之後執行,包含三個參數,data 為載入的 JavaScript 內容,以字串格式表示, textStatus 為狀態說明字串。
假設 books.js 內容如下:
於畫面上配置一個 div 標籤,並將其 id 設定為 msg ,現在撰寫以下的程式碼:
當這段程式碼執行完畢,則會在 div 元素中出現以下的內容:
書名:HTML5從零開始
價格:490
頁數:500
ISBN:1111-2222-3333-0000
書名:HTML5完美風暴
價格:1000
頁數:1100
ISBN:000-AAAA-3333-0000
$.getScript('js/books.js', function (data, textStatus, jqxhr) {
//載入成功後要執行的程式碼
});
其中第二個參數函式於載入完成之後執行,包含三個參數,data 為載入的 JavaScript 內容,以字串格式表示, textStatus 為狀態說明字串。
假設 books.js 內容如下:
book0 = {
title: 'HTML5從零開始',
price: '490',
pages: '500',
ISBN:'1111-2222-3333-0000'
};
book1 = {
title: 'HTML5完美風暴',
price: '1000',
pages: '1100',
ISBN: '000-AAAA-3333-0000'
};
於畫面上配置一個 div 標籤,並將其 id 設定為 msg ,現在撰寫以下的程式碼:
$.getScript('js/books.js', function (data, textStatus, jqxhr) {
$('#msg').html(
'書名:' + book0.title + '<br/>' +
'價格:' + book0.price + '<br/>' +
'頁數:' + book0.pages + '<br/>' +
'ISBN:' + book0.ISBN + '<br/><br/> ' +
'書名:' + book1.title + '<br/>' +
'價格:' + book1.price + '<br/>' +
'頁數:' + book1.pages + '<br/>' +
'ISBN:' + book1.ISBN + '<br/><br/> ');
});
當這段程式碼執行完畢,則會在 div 元素中出現以下的內容:
書名:HTML5從零開始
價格:490
頁數:500
ISBN:1111-2222-3333-0000
書名:HTML5完美風暴
價格:1000
頁數:1100
ISBN:000-AAAA-3333-0000
沒有留言:
張貼留言