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

当我们使用 Ajax 技术异步加载 HTML 页面时，如果此页面中包含 JavaScript 代码，那么默认情况下这些 JavaScript 代码是不会被执行的，因为异步请求的 HTML 页面并没有像普通页面那样被完全加载和渲染。为了解决这个问题，本文会给出一些常见的解决方法。

方法一：eval 函数

在 Ajax 获取到 HTML 页面后，我们可以通过 eval 函数动态执行其中的 JavaScript 代码。示例如下：

$.get('example.html', function(data) {
  let div = $('<div></div>').html(data);
  $('body').append(div);
  // 获取新增的 script 标签并执行其中的 JavaScript 代码
  div.find('script').each(function() {
    eval($(this).text());
  });
});

在上述示例中，我们使用 $.get 方法获取 HTML 页面，然后创建一个新的 div 并将获取的 HTML 内容插入其中，最后在新增的 script 标签上应用 eval 函数执行其中的 JavaScript 代码。

但是需要注意的是，使用 eval 函数可能会带来一些风险，因为 eval 会执行传入的代码字符串，如果字符串来自于不可信的来源，则可能会造成安全漏洞，因此，我们需要在使用 eval 函数时格外小心。

方法二：jQuery 的 load 方法

除了手动执行新增的 JavaScript 代码外，我们还可以使用 jQuery 的 load 方法直接加载 HTML 页面，并可以选择性地仅获取其中的某个元素或某些元素。示例如下：

$('body').load('example.html .container', function() {
  console.log('成功加载 example.html 中的 .container 元素');
});

在上述示例中，我们通过选择器 .container 获取 HTML 页面中的 .container 元素，并在加载完成后执行回调函数，从而在回调函数中对该元素进行进一步处理。

注意事项

• 当我们动态载入 HTML 页面后需要执行其中的 JavaScript 代码时，需要确保 JavaScript 代码的正确性，否则会导致页面出现错误甚至崩溃。
• 虽然使用 eval 函数可以执行任意 JavaScript 代码，但是由于 eval 的不安全性，我们推荐在实际开发中尽可能使用其他方法来执行动态载入的 JavaScript 代码，如 jQuery 的 load 方法等。