jQuery.fn.load调用时给url加selector之后执行脚本的方法
调用jQuery.fn.load时是可以在url后面加选择器来指定加载的内容的。文档里这样描述:
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector"。请查看示例。
$("#links").load("/Main_Page#p-Getting-Startedli");
不过有一个问题,如果指定了选择器,页面里的脚本就不会执行,查看了jQuery的代码之后发现,原来是有选择器的时候,将所有脚本过滤掉了
jQuery 1.8.3源码两个片段:
rscript=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,//逗号是因为这是一个语句的一部分
//Seeifaselectorwasspecifiedself.html(selector?//CreateadummydivtoholdtheresultsjQuery("<div>")//injectthecontentsofthedocumentin,removingthescripts//toavoidany'PermissionDenied'errorsinIE.append(responseText.replace(rscript,""))//Locatethespecifiedelements.find(selector)://Ifnot,justinjectthefullresultresponseText);
那么,如果想执行页面中的脚本,只需要找到页面内容中的脚本再执行一次就行了。在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>:
<scripttype="text/javascript">console.log("这是不需要jQuery.fn.load时执行的脚本")</script><scripttype="text/javascript"loadinvoke="loadinvoke">console.log("这是需要jQuery.fn.load时执行的脚本")</script>
给加载的脚本加点料:
rscript=/<script\b[^>]*\bloadinvoke\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;$("#place_holder").load("Page.html#content",function(html){//找出符合条件的脚本varm=html.match(rscript);for(vari=0;i<m.length;i++){//生成临时的div执行脚本$("<div>").html(m[i]).remove();}});
抛砖引玉
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。