jQuery.fn.load調(diào)用時(shí)給url加selector之后執(zhí)行腳本的方法

調(diào)用jQuery.fn.load時(shí)是可以在url后面加選擇器來指定加載的內(nèi)容的。文檔里這樣描述：

創(chuàng)新互聯(lián)建站是一家從事企業(yè)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)制作的專業(yè)網(wǎng)站設(shè)計(jì)公司，擁有經(jīng)驗(yàn)豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁設(shè)計(jì)人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實(shí)力，在網(wǎng)站建設(shè)領(lǐng)域樹立了自己獨(dú)特的設(shè)計(jì)風(fēng)格。自公司成立以來曾獨(dú)立設(shè)計(jì)制作的站點(diǎn)千余家。

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

不過有一個(gè)問題，如果指定了選擇器，頁面里的腳本就不會(huì)執(zhí)行，查看了jQuery的代碼之后發(fā)現(xiàn)，原來是有選擇器的時(shí)候，將所有腳本過濾掉了

rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, // 逗號(hào)是因?yàn)檫@是一個(gè)語句的一部分 

// 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 ); 

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

$("#place_holder").load("Page.html #content", function(html) { 
    // 加載html內(nèi)容到頁面上，里面的css和script都會(huì)執(zhí)行 
    // 加載之后即把當(dāng)前的臨時(shí)DIV刪掉（沒驗(yàn)證，如果有問題可以不remove） 
    $("<div>").html(html).remove(); 
}); 

不過既然jQuery要把腳本過濾掉就有它的道理……因?yàn)閔tml里的css和script有可能會(huì)有一部分是不想調(diào)用的，怎么處理呢？用與jQuery過濾script的類似的辦法，把所有script找出來，再選出需要執(zhí)行的來執(zhí)行。

于是，約定，在script中加入一個(gè)屬性loadinvoke="true"的會(huì)在加載內(nèi)容后執(zhí)行，如定義這樣的<script>：

<script type="text/javascript"> 
    console.log("這是不需要jQuery.fn.load時(shí)執(zhí)行的腳本") 
</script> 
 
<script type="text/javascript" loadinvoke="loadinvoke"> 
    console.log("這是需要jQuery.fn.load時(shí)執(zhí)行的腳本") 
</script> 

給加載的腳本加點(diǎn)料：

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++) { 
        // 生成臨時(shí)的div執(zhí)行腳本 
        $("<div>").html(m[i]).remove(); 
    } 
}); 

拋磚引玉

分享題目：jQuery.fn.load調(diào)用時(shí)給url加selector之后執(zhí)行腳本的方法
標(biāo)題URL：http://muchs.cn/article8/ghsiop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、云服務(wù)器、搜索引擎優(yōu)化、面包屑導(dǎo)航、、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)