調用jQuery.fn.load時是可以在url后面加選擇器來指定加載的內容的。文檔里這樣描述：

默認使用 GET 方式 - 傳遞附加參數時自動轉換為 POST 方式。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector"。請查看示例。 $("#links").load("/Main_Page?#p-Getting-Started?li");?

不過有一個問題，如果指定了選擇器，頁面里的腳本就不會執行，查看了jQuery的代碼之后發現，原來是有選擇器的時候，將所有腳本過濾掉了

jQuery 1.8.3源碼兩個片段：? rscript?=?/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,?//?逗號是因為這是一個語句的一部分? //?See?if?a?selector?was?specified? self.html(?selector?? ?? ????//?Create?a?dummy?div?to?hold?the?results? ????jQuery("<div>")? ? ????????//?inject?the?contents?of?the?document?in,?removing?the?scripts? ????????//?to?avoid?any?'Permission?Denied'?errors?in?IE? ????????.append(?responseText.replace(?rscript,?""?)?)? ? ????????//?Locate?the?specified?elements? ????????.find(?selector?)?:? ? ????//?If?not,?just?inject?the?full?result? ????responseText?);?

那么，如果想執行頁面中的腳本，只需要找到頁面內容中的腳本再執行一次就行了。在load的callback中，是可以取到整個頁面內容的，所以只需要一句話就可以解決：

$("#place_holder").load("Page.html?#content",?function(html)?{?

????//?加載html內容到頁面上，里面的css和script都會執行?

????//?加載之后即把當前的臨時DIV刪掉（沒驗證，如果有問題可以不remove）?

????$("<div>").html(html).remove();?

});?

不過既然jQuery要把腳本過濾掉就有它的道理……因為html里的css和script有可能會有一部分是不想調用的，怎么處理呢？用與jQuery過濾script的類似的辦法，把所有script找出來，再選出需要執行的來執行。

于是，約定，在script中加入一個屬性loadinvoke="true"的會在加載內容后執行，如定義這樣的<script>：

<script?type="text/javascript">?

????console.log("這是不需要jQuery.fn.load時執行的腳本")?

</script>?

?

<script?type="text/javascript"?loadinvoke="loadinvoke">?

????console.log("這是需要jQuery.fn.load時執行的腳本")?

</script>?

給加載的腳本加點料：

rscript?=?/<script\b[^>]*\b?loadinvoke?\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;?

?

$("#place_holder").load("Page.html?#content",?function(html)?{?

????//?找出符合條件的腳本?

????var?m?=?html.match(rscript);?

????for?(var?i?=?0;?i?<?m.length;?i++)?{?

????????//?生成臨時的div執行腳本?

????????$("<div>").html(m[i]).remove();?

????}?

});?

拋磚引玉

總結

以上是生活随笔為你收集整理的jQuery.fn.load调用时给url加selector之后执行脚本的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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