jQuery.fn.load调用时给url加selector之后执行脚本的方法

调用jQuery.fn.load时是可以在url后面加选择器来指定加载的内容的。文档里这样描述：

不过有一个问题，如果指定了选择器，页面里的脚本就不会执行，查看了jQuery的代码之后发现，原来是有选择器的时候，将所有脚本过滤掉了

那么，如果想执行页面中的脚本，只需要找到页面内容中的脚本再执行一次就行了。在load的callback中，是可以取到整个页面内容的，所以只需要一句话就可以解决：

1. $("#place_holder").load("Page.html #content", function(html) { 
2.     // 加载html内容到页面上，里面的css和script都会执行 
3.     // 加载之后即把当前的临时DIV删掉（没验证，如果有问题可以不remove） 
4.     $("<div>").html(html).remove(); 
5. }); 

不过既然jQuery要把脚本过滤掉就有它的道理……因为html里的css和script有可能会有一部分是不想调用的，怎么处理呢？用与jQuery过滤script的类似的办法，把所有script找出来，再选出需要执行的来执行。

于是，约定，在script中加入一个属性loadinvoke="true"的会在加载内容后执行，如定义这样的<script>：

1. <script type="text/javascript"> 
2.     console.log("这是不需要jQuery.fn.load时执行的脚本") 
3. </script> 
4.  
5. <script type="text/javascript" loadinvoke="loadinvoke"> 
6.     console.log("这是需要jQuery.fn.load时执行的脚本") 
7. </script> 

给加载的脚本加点料：

1. rscript = /<script\b[^>]*\bloadinvoke\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi; 
2.  
3. $("#place_holder").load("Page.html #content", function(html) { 
4.     // 找出符合条件的脚本 
5.     var m = html.match(rscript); 
6.     for (var i = 0; i < m.length; i++) { 
7.         // 生成临时的div执行脚本 
8.         $("<div>").html(m[i]).remove(); 
9.     } 
10. }); 

抛砖引玉

本文转自边城__ 51CTO博客，原文链接：http://blog.51cto.com/jamesfancy/1113095，如需转载请自行联系原作者