jQuery 動態載入 JavaScript

jQuery 支援 JavaScript 檔案的動態載入,只需調用 getScript() 方法即可。假設有一個 JavaScript 檔案,路徑為 js/books.js,現在,我們可以寫如下的程式碼,動態將其載入:

$.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


沒有留言: