這次帶給大家jQuery動態載入js腳本檔案實作方法,jQuery動態載入js腳本檔案的注意事項有哪些,下面就是實戰案例,一起來看一下。
動態載入Javascript是一項非常強大且有用的技術。這方面的主題在網路上已經討論了不少,我也常常會在一些個人專案上使用RequireJS和Dojo載入js
它們很強大,但有時也會得不償失。如果你使用的是jQuery,它裡面有一個內建的方法可以用來載入單一js檔案。當你需要延遲載入一些js插件或其它類型的檔案時,可以使用這個方法。下面就來介紹如何使用它吧!
一、jQuery getScript()方法載入JavaScript
#jQuery內建了一個方法可以載入單一的js檔案;當載入完成後你可以在回調函數裡執行後續操作。最基本的使用jQuery.getScript的方法是這樣:
jQuery.getScript("/path/to/myscript.js", function(data, status, jqxhr) { /* 做一些加载完成后需要执行的事情 */ });
這個getScript方法回傳一個jqxhr,你可以像下面這樣用它:
jQuery.getScript("/path/to/myscript.js") .done(function() { /* 耶,没有问题,这里可以干点什么 */ }) .fail(function() { /* 靠,马上执行挽救操作 */ });
最常見的使用jQuery.getScript的地方是延遲載入一個js插件,而且在載入完成時執行它:
jQuery.getScript("jquery.cookie.js") .done(function() { jQuery.cookie("cookie_name", "value", { expires: 7 }); });
二、快取問題
有一個非常重要的問題,使用jQuery.getScript時,你需要用一個時間戳字串跟在需要載入的js位址後面,防止它被快取。但是,如果你希望這個腳本被緩存,你需要設定全域快取變量,像下面這樣:
jQuery.ajaxSetup({ cache: true });
jQuery.ajax({ url: "jquery.cookie.js", dataType: "script", cache: true }).done(function() { jQuery.cookie("cookie_name", "value", { expires: 7 }); });
在載入腳本時一定要小心快取問題!
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
#以上是jQuery動態載入js腳本檔案實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!