运行 JavaScript 函数写入 Called/Responce 数据 AJAX 在主页面

Question

我的问题是我有一个 JavaScript 函数写在 PHP 文件中，当我从 AJAX 请求调用它时，我想运行 JavaScript 在成功 AJAX 请求后也在主页上运行。例如，我有一个 main.html 文件，我在其中编写了一个 AJAXX 函数，如下所示。

main.html

<script type="text/javascript">
/* AJAX Function
----------------------------------------------- */
function ajaxFunction() {
    var FD = new FormData();
    var ajx = new XMLHttpRequest();
    ajx.onreadystatechange = function () {
        if (ajx.readyState == 4 && ajx.status == 200) {
            document.getElementById("mainContent").innerHTML = ajx.responseText;
            hello();  //Uncaught ReferenceError: hello is not defined
        }
    };
    ajx.open("POST", "/example.php", true);
    ajx.send(FD);
    document.getElementById("mainContent").innerHTML = 'Loading...';
    return false;
}
</script>

我的 example.php 文件包含一个 JavaScript 函数作为

example.php

<?php
echo 'Some contents and functions';
echo '<script type="text/javascript">
   function hello() {
       alert("Hello");
    }
   </script>';
echo 'Some contents and functions';
?>

现在，当我运行 index.html 文件时，我在控制台休息时收到 Uncaught ReferenceError: hello is not defined 错误我看到函数体写在 HTML 页上，同时检查元素-page.

据我所知 innerHTML does not run scripts. 那么这个问题的解决方法是什么。您还可以查看下面链接的答案，我认为它与我的问题有关，但已尝试但无法解决我的问题。

研究过Questions/Answers:

Answer 1

正如我分享的，你知道 innerHTML does not run scripts. 所以我们必须四处看看，然后我在 Whosebug 上找到了一个解决方案，我在这里分享这个问题的答案。

main.html

<script type="text/javascript">
/* AJAX Function
----------------------------------------------- */
function ajaxFunction() {
    var FD = new FormData();
    var ajx = new XMLHttpRequest();
    ajx.onreadystatechange = function () {
        if (ajx.readyState == 4 && ajx.status == 200) {
            setInnerHTML(document.getElementById("mainContent"), ajx.responseText); // does run <script> tags in HTML
            hello();
        }
    };
    ajx.open("POST", "/example.php", true);
    ajx.send(FD);
    document.getElementById("mainContent").innerHTML = 'Loading...';
    return false;
}

//
var setInnerHTML = function(elm, html) {
  elm.innerHTML = html;
  Array.from(elm.querySelectorAll("script")).forEach(oldScript => {
    const newScript = document.createElement("script");
    Array.from(oldScript.attributes)
      .forEach(attr => newScript.setAttribute(attr.name, attr.value));
    newScript.appendChild(document.createTextNode(oldScript.innerHTML));
    oldScript.parentNode.replaceChild(newScript, oldScript);
  });
}
</script>

其概念清晰。当您从 PHP 文件中获取响应数据时，首先从中提取 <script ..... </script> 标签并将它们添加到 index.html 文件中，然后使用 createElement('script') 将所有脚本复制到此您可以在任何地方响应数据后轻松调用您的函数。

换句话说，您可以使用调用 createElement('script') 的 DOM 方法在初始解析之外创建一个执行脚本元素，设置其 src/content，然后添加它到文件。替代方案是 jQuery 的 getScript90 所做的。

运行 JavaScript 函数写入 Called/Responce 数据 AJAX 在主页面

Run A JavaScript Function Written In Called/Responce Data Of AJAX In Main Page

html

javascript

ajax

dom

innerhtml