首頁 > web前端 > js教程 > jQuery動態載入js腳本檔案實作方法

jQuery動態載入js腳本檔案實作方法

php中世界最好的语言
發布: 2018-04-23 14:57:56
原創
1496 人瀏覽過

這次帶給大家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 LigerUI實作檔案上傳步驟詳解

jquery動態載入js檔案詳解

#

以上是jQuery動態載入js腳本檔案實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板