Write By Monkeyfly

以下內(nèi)容均為原創(chuàng)，如需轉(zhuǎn)載請(qǐng)注明出處。

前提

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

做法：

將公共的 html 頁(yè)面提取出來(lái)，放在一個(gè)獨(dú)立的 HTML 文件中。

然后在需要使用的 html 頁(yè)面中，使用 jQuery 的 load 方法進(jìn)行引用即可。

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

用法：

jQuery 中的 load 方法

jQuery.load() AJAX 函數(shù)詳解

具體代碼如下：

//HTML部分：

//js部分：

//當(dāng)前頁(yè)面的js文件

$(function(){

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

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

})

//引入的公共登錄頁(yè)面的js文件

不想看代碼的可以看圖：

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

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

發(fā)現(xiàn)問(wèn)題

注：這里以 關(guān)閉按鈕 (即 .layer-close-icon 元素)為例，進(jìn)行了測(cè)試和調(diào)試。

代碼運(yùn)行后發(fā)現(xiàn)：登錄彈框頁(yè)面中所有元素的綁定事件都沒(méi)有被觸發(fā)。點(diǎn)擊關(guān)閉按鈕也沒(méi)有反應(yīng)。

控制臺(tái)調(diào)試后發(fā)現(xiàn)：在為 $(".layer-close-icon") 注冊(cè)點(diǎn)擊事件時(shí)，根本就沒(méi)有找到該元素?！救缦聢D所示】

在控制臺(tái)查看當(dāng)前的 HTML 結(jié)構(gòu)，發(fā)現(xiàn)：此時(shí)，登錄框并沒(méi)有被加載進(jìn)來(lái)。所以，頁(yè)面元素目前還不存在，當(dāng)然獲取不到該元素，也就不能為它注冊(cè)點(diǎn)擊事件了?！救缦聢D所示】

后來(lái)思考了許久，也問(wèn)了一下同事，得出一個(gè)結(jié)論：這與頁(yè)面中 js 文件 的加載和執(zhí)行順序有關(guān)系。

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

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

當(dāng)頁(yè)面中的 DOM 元素全部加載完畢后就執(zhí)行jQuery 中的 $(document).ready(function(){})方法，或簡(jiǎn)寫(xiě)為：$(function(){})。

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

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

解決問(wèn)題

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

搜到的答案如下：

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

為什么說(shuō)貌似可行呢？一是沒(méi)見(jiàn)過(guò)，二是沒(méi)用過(guò)，三是感覺(jué)應(yīng)該沒(méi)問(wèn)題。

經(jīng)過(guò)測(cè)試，發(fā)現(xiàn)確實(shí)可行。具體代碼如下圖所示：

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

請(qǐng)注意： 該函數(shù)是通過(guò)異步方式加載數(shù)據(jù)的。不要直接在 jQuery.getScript() 執(zhí)行后直接調(diào)用該 js 文件中的變量或函數(shù)。

關(guān)于該方法的詳情，請(qǐng)點(diǎn)擊 jQuery.getScript() 函數(shù)詳解 查看。

結(jié)束語(yǔ)

至此，問(wèn)題就已經(jīng)被解決了。

后來(lái)同事又給我提供了一個(gè)新的思路：

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

而且load方法可以使用一個(gè)回調(diào)函數(shù)作為第二個(gè)參數(shù)，所以我們可以在回調(diào)函數(shù)中動(dòng)態(tài)的將 js 文件加載進(jìn)來(lái)。

具體代碼如下所示：【親測(cè)可行】

$(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中引入調(diào)用另一個(gè)公用html模板文件的方法

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。