当使用 AJAX（Asynchronous JavaScript and XML）技术来异步加载 HTML 页面时，通常情况下，在页面的 <head> 标签中包含的 JavaScript 代码不会被自动执行和加载。这是因为浏览器只会将 HTML 页面中的文本内容解析为 DOM（Document Object Model），而不会执行其中的 script 标签。
然而，在某些情况下，我们可能希望在通过 AJAX 加载的 HTML 页面中执行 JavaScript 代码。例如，我们可能需要根据用户的不同操作动态地更新页面内容。在这种情况下，我们可以使用以下两种方法来实现：
方法一：eval() 函数
eval() 函数可以将字符串作为 JavaScript 代码来执行。因此，我们可以通过获取 AJAX 返回的 HTML 代码，提取其中的 JavaScript 代码，并使用 eval() 函数来执行它们。以下是一个简单的示例：
-- -------------------- ---- -------
--------
---- ---------------
--------- -------
-------- ------------------ -
--- ------- - -----------------------------
----------------------- -
---------------------
---
-
---在这个示例中，我们首先通过 AJAX 获取 example.html 页面的 HTML 代码。然后，我们使用 jQuery 的 filter() 方法从中提取出所有的 script 标签，并使用 each() 方法遍历它们。在遍历过程中，我们将每个 script 标签的文本内容作为字符串传递给 eval() 函数来执行其中的 JavaScript 代码。
需要注意的是，使用 eval() 函数存在一些潜在的安全风险，因为它可以执行任意的 JavaScript 代码。因此，在使用 eval() 函数时，要确保所执行的代码来自可信的来源，并且不包含恶意代码。
方法二：动态创建 script 标签
另一种实现方式是，我们可以从 AJAX 返回的 HTML 代码中提取出 JavaScript 代码，并将其作为新的 script 标签插入到页面中。以下是一个简单的示例：
-- -------------------- ---- -------
--------
---- ---------------
--------- -------
-------- ------------------ -
--- ------- - -----------------------------
----------------------- -
-------------
------------- ------------------
---------------------
------------------
---
-
---在这个示例中，我们首先通过 AJAX 获取 example.html 页面的 HTML 代码。然后，我们使用 jQuery 的 filter() 方法从中提取出所有的 script 标签，并使用 each() 方法遍历它们。在遍历过程中，我们使用 $() 函数创建一个新的 script 标签，并设置其 type 属性为 text/javascript。然后，我们将每个 script 标签的文本内容作为字符串传递给 text() 方法，并将其插入到页面的 <head> 标签中。
相比于使用 eval() 函数，动态创建 script 标签的方法更加安全，而且也更加灵活，可以支持一些需要动态加载 JavaScript 代码的场景。但是，需要注意的是，在使用这种方法时，我们需要确保所插入的 JavaScript 代码不会与页面中已有的代码产生冲突，并且不会对页面的性能造成负面影响。
综上所述，当通过 AJAX 加载 HTML 页面时，script 标签不会自动执行和加载。如果希望在通过 AJAX 加载的页面中执行 JavaScript 代码，我们可以使用 eval() 函数或者动态创建 script 标签的方式来实现。但是，在使用这些方法时，我们需要注意安全性和性能等方面的问题，并进行适当的优化和防护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30388