Write By Monkeyfly
以下內容均為原創(chuàng )，如需轉載請注明出處。
有一個(gè)公共的登錄彈框頁(yè)面需要在多個(gè)頁(yè)面引用，百度后就使用了jQuery 的 load 方法。
做法：
html 頁(yè)面提取出來(lái)，放在一個(gè)獨立的 HTML 文件中。html 頁(yè)面中，使用 jQuery 的 load 方法進(jìn)行引用即可。<head>、<body>等標簽，只需要放置你所用到的標簽即可。用法：
具體代碼如下：
//HTML部分：<div id="login_box" class="login-box"></div>//js部分：//當前頁(yè)面的js文件<script src="../../js/carriage/carriage.js"></script><script> $(function(){ /*公共部分：登錄彈框*/ $("#login_box").load("../../template/login/login.html"); })</script>//引入的公共登錄頁(yè)面的js文件<script src="../../template/login/login.js"></script>不想看代碼的可以看圖：
carriage.js 文件中的部分 html 代碼如下所示
login.js 文件中的 部分 js 代碼如下所示：
注：這里以 關(guān)閉按鈕 （即 .layer-close-icon 元素）為例，進(jìn)行了測試和調試。
$(".layer-close-icon") 注冊點(diǎn)擊事件時(shí)，根本就沒(méi)有找到該元素?！救缦聢D所示】
HTML 結構，發(fā)現：此時(shí)，登錄框并沒(méi)有被加載進(jìn)來(lái)。所以，頁(yè)面元素目前還不存在，當然獲取不到該元素，也就不能為它注冊點(diǎn)擊事件了?！救缦聢D所示】
后來(lái)思考了許久，也問(wèn)了一下同事，得出一個(gè)結論：這與頁(yè)面中 js 文件 的加載和執行順序有關(guān)系。
js代碼是HTML頁(yè)面的一部分，所以js在頁(yè)面裝載時(shí)的執行順序就是其引入<script />標簽的出現順序。<script /> 標簽里面的 js 代碼 或者 通過(guò) src 引入的外部 js，都是按照其語(yǔ)句出現的順序執行，而且執行過(guò)程是文檔裝載的一部分。DOM 元素全部加載完畢后就執行jQuery 中的 $(document).ready(function(){})方法，或簡(jiǎn)寫(xiě)為：$(function(){})。.ready() 方法之前有 js 代碼存在，那么會(huì )先執行 ready()方法 之前的 js 代碼，然后再執行 .ready()方法。參考資料： 淺談js在html中的加載執行順序,多個(gè)jquery ready執行順序
然后通過(guò)百度搜了一段時(shí)間，突然發(fā)現一個(gè)貌似可行的解決方法： jQuery 中的 $.getScript() 方法。
搜到的答案如下：
（點(diǎn)擊查看）jquery load 加載html 但是html包含的js不生效 ，求助??！
為什么說(shuō)貌似可行呢？一是沒(méi)見(jiàn)過(guò)，二是沒(méi)用過(guò)，三是感覺(jué)應該沒(méi)問(wèn)題。
經(jīng)過(guò)測試，發(fā)現確實(shí)可行。具體代碼如下圖所示：
jQuery.getScript() 函數用于動(dòng)態(tài)加載JS文件，并在全局作用域下執行文件中的JS代碼。
請注意： 該函數是通過(guò)異步方式加載數據的。不要直接在 jQuery.getScript() 執行后直接調用該 js 文件中的變量或函數。
關(guān)于該方法的詳情，請點(diǎn)擊 jQuery.getScript() 函數詳解 查看。
至此，問(wèn)題就已經(jīng)被解決了。
后來(lái)同事又給我提供了一個(gè)新的思路：
加載完 HTML 文件之后，使用 js 動(dòng)態(tài)創(chuàng )建一個(gè) script 標簽，然后通過(guò)它的 src 屬性，指向你所要引入的js文件的路徑。
而且load方法可以使用一個(gè)回調函數作為第二個(gè)參數，所以我們可以在回調函數中動(dòng)態(tài)的將 js 文件加載進(jìn)來(lái)。
具體代碼如下所示：【親測可行】
<script> $(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("載入成功！"); }); */ }) </script>參考資料：
聯(lián)系客服
