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