执行ajax返回数据中包含的script脚本代码

作者：秋了秋发表时间：2016年09月23日

ajax虽然很方便，提升了我们的交互体验，但是它也有可恨之处，就是ajax请求得到的数据中如果包含脚本代码，比如说请求得到的是一块html内容，我们把这块html内容插入到网页中的某个地方，但是其中明明存在的脚本却不能得以运行，如果你听不懂我在说什么，说明你还不懂ajax或者用得少没遇到这种现象。通常来讲，页面中包含的脚本形式无非两种：

第一种：
<script>
 var _hmt = _hmt || []; 
 (function() {
 var hm = document.createElement("script");
 hm.src = "//hm.baidu.com/hm.js?d9369436322d94b2213525fa8711e642";
 var s = document.getElementById("script");
 s.appendChild(hm);
 })();
 </script>
第二种：
<script src="//netblog.cn/index.js"></script>

但是他们都不执行，这该如何是好？为了解决这个千古难题~我专门写了个函数攻破这个瓶颈！！！使得无论如何怎么ajax，效果都跟刷新页面也一样，所有该有的script执行环境都有了。函数如下：

function executeScript(html){
   var reg = /<script[^>]*>([^\x00]*)$/i;
   var htmlBlock = html.split("<\/script>");
   var blocks,srcBlock,script;
   var scriptContent=document.getElementById("script")||document.body;
   for (var i in htmlBlock){ 
     if (blocks = htmlBlock[i].match(reg)){ 
       var matchAll=blocks[0];
       var srcReg=/src=[\'\"](.*?)[\'\"]/i;
       if(srcBlock=matchAll.match(srcReg)){
          script=document.createElement("script");
          script.src=srcBlock[1];
          scriptContent.appendChild(script);
       }else{
          var code = blocks[1].replace(/<!--/, '');
          try{
            eval(code)
          }
          catch (e){
             console.log(e);
          }
       } 
     }
   }
 }

使用方法就是在ajax请求成功之后并把相应请求结果插入到页面之后再调用这个函数，参数就是请求得到的数据：executeScript(data);

说一下思路原理：从请求的数据中通过正则匹配查找script标签并把它们都分离出来，然后判断是什么形式的script标签，如果有src的就把src地址通过正则匹配出来，然后创建一个新的script标签插到网页中。否则通过evel直接执行script里面的代码。

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/459.html

目录: 前端编程标签: ajax脚本 10299次阅读