0

我的问题是我有一个用 PHP 文件编写的 JavaScript 函数，当我从 AJAX 请求调用它时，我也想在成功的 AJAX 请求后在主页上运行该 JavaScript 函数。例如，我有一个 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 函数

例子.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 页面上编写的，同时检查页面上的元素。

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

研究问题/答案：

4

1 回答 1

0

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

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;
}

//https://stackoverflow.com/a/47614491/3170029
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，并将其添加到文档中。另一种选择是 jQuerygetScript90所做的。

于 2020-06-14T05:17:20.673 回答