Ajax 动态载入html页面后不能执行其中的js快速解决方法

最新推荐文章于 2021-08-06 17:35:24 发布

原创最新推荐文章于 2021-08-06 17:35:24 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

Javascript 同时被 2 个专栏收录

243 篇文章

订阅专栏

Ajax

4 篇文章

订阅专栏

本文介绍了一种实用方法，用于解决通过Ajax加载的页面中JavaScript代码无法执行的问题。该方法首先检测加载的页面是否包含JS代码，然后逐段加载并执行这些JS代码，确保跨页面调用的JS正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有一个公用页面需要在多个页面调用，其中涉及到部分js已经写在了公用页面中，通过ajax加载该页面后无法执行其中的js。

综合以上多种方式，排除不利因素，总结出一个比较实用的方法，可以满足类似这样公用页面的执行ajax加载的js的需求，在ajax加载的公用函数里面加上代码即可。主要代码如下：

// 第一步：匹配加载的页面中是否含有js
var regDetectJs = /<script(.|\n)*?>(.|\n|\r\n)*?<\/script>/ig;
var jsContained = ajaxLoadedData.match(regDetectJs); //ajaxLoadedData为ajax获取到的数据
// 第二步：如果包含js，则一段一段的取出js再加载执行
if(jsContained) {
  // 分段取出js正则
  var regGetJS = /<script(.|\n)*?>((.|\n|\r\n)*)?<\/script>/im;
  // 按顺序分段执行js
  var jsNums = jsContained.length;
  for (var i=0; i<jsNums; i++) {
    var jsSection = jsContained[i].match(regGetJS);
    if(jsSection[2]) {
      if(window.execScript) {
        // 给IE的特殊待遇
        window.execScript(jsSection[2]);
      } else {
        // 给其他大部分浏览器用的
        window.eval(jsSection[2]);
      }
    }
  }
}