Write By Monkeyfly

以下內容均為原創(chuàng)，如需轉載請注明出處。

前提

有一個公共的登錄彈框頁面需要在多個頁面引用，百度后就使用了jQuery 的 load 方法。

做法：

將公共的 html 頁面提取出來，放在一個獨立的 HTML 文件中。

然后在需要使用的 html 頁面中，使用 jQuery 的 load 方法進行引用即可。

注：提取的部分，不需要包含多余的、等標簽，只需要放置你所用到的標簽即可。

用法：

jQuery 中的 load 方法

jQuery.load() AJAX 函數詳解

具體代碼如下：

//HTML部分：

//js部分：

//當前頁面的js文件

$(function(){

/*公共部分：登錄彈框*/

$("#login_box").load("../../template/login/login.html");

})

//引入的公共登錄頁面的js文件

不想看代碼的可以看圖：

carriage.js 文件中的部分 html 代碼如下所示

login.js 文件中的 部分 js 代碼如下所示：

發(fā)現問題

注：這里以 關閉按鈕 (即 .layer-close-icon 元素)為例，進行了測試和調試。

代碼運行后發(fā)現：登錄彈框頁面中所有元素的綁定事件都沒有被觸發(fā)。點擊關閉按鈕也沒有反應。

控制臺調試后發(fā)現：在為 $(".layer-close-icon") 注冊點擊事件時，根本就沒有找到該元素?！救缦聢D所示】

在控制臺查看當前的 HTML 結構，發(fā)現：此時，登錄框并沒有被加載進來。所以，頁面元素目前還不存在，當然獲取不到該元素，也就不能為它注冊點擊事件了?！救缦聢D所示】

后來思考了許久，也問了一下同事，得出一個結論：這與頁面中 js 文件 的加載和執(zhí)行順序有關系。

頁面上的js代碼是HTML頁面的一部分，所以js在頁面裝載時的執(zhí)行順序就是其引入標簽的出現順序。

標簽里面的 js 代碼 或者 通過 src 引入的外部 js，都是按照其語句出現的順序執(zhí)行，而且執(zhí)行過程是文檔裝載的一部分。

當頁面中的 DOM 元素全部加載完畢后就執(zhí)行jQuery 中的 $(document).ready(function(){})方法，或簡寫為：$(function(){})。

如果在執(zhí)行 .ready() 方法之前有 js 代碼存在，那么會先執(zhí)行 ready()方法 之前的 js 代碼，然后再執(zhí)行 .ready()方法。

參考資料： 淺談js在html中的加載執(zhí)行順序,多個jquery ready執(zhí)行順序

解決問題

然后通過百度搜了一段時間，突然發(fā)現一個貌似可行的解決方法： jQuery 中的 $.getScript() 方法。

搜到的答案如下：

(點擊查看)jquery load 加載html 但是html包含的js不生效 ，求助！！

為什么說貌似可行呢？一是沒見過，二是沒用過，三是感覺應該沒問題。

經過測試，發(fā)現確實可行。具體代碼如下圖所示：

jQuery.getScript() 函數用于動態(tài)加載JS文件，并在全局作用域下執(zhí)行文件中的JS代碼。

請注意： 該函數是通過異步方式加載數據的。不要直接在 jQuery.getScript() 執(zhí)行后直接調用該 js 文件中的變量或函數。

關于該方法的詳情，請點擊 jQuery.getScript() 函數詳解 查看。

結束語

至此，問題就已經被解決了。

后來同事又給我提供了一個新的思路：

加載完 HTML 文件之后，使用 js 動態(tài)創(chuàng)建一個 script 標簽，然后通過它的 src 屬性，指向你所要引入的js文件的路徑。

而且load方法可以使用一個回調函數作為第二個參數，所以我們可以在回調函數中動態(tài)的將 js 文件加載進來。

具體代碼如下所示：【親測可行】

$(function(){

/*公共部分：登錄彈框*/

$("#login_box").load("../../template/login/login.html",function(){

var sc = document.createElement("script");

sc.src= "../../template/login/login.js";

$("body").append(sc);

});

/* $.getScript("../../template/login/login.js",function(){

// alert("載入成功！");

}); */

})

參考資料：

html中引入調用另一個公用html模板文件的方法

如何讓html引用公共的頭部和尾部(多個html文件公用一個header.html和footer.html)

總結

以上是生活随笔為你收集整理的js中load载入html页面,使用jquery的load方法加载html页面，但是html引入的js不生效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。