jQuery.fn.load調用時給url加selector之后執行腳本的方法

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

$("#links").load("/Main_Page #p-Getting-Started li"); 

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

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(); 
    } 
}); 

拋磚引玉