当前位置:秋叶网络博客 前端编程 ◊ 执行ajax返回数据中包含的script脚本代码

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

作者:秋叶 发表时间:2016年9月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="http://www.mizuiren.com/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里面的代码。

目录: 前端编程 | 标签: | 7308次阅读