javascript - 运行 AJAX 调用的 javascript 代码

Question

我的网站使用pushState来加载页面。我有一个问题，我想在其中一个页面上使用 javascript，但不能，因为它使用 AJAX 加载所有内容。那我该怎么办？有人告诉我一些有关“parseScript”的信息，但我找不到足够的信息。

--示例--

我使用 AJAX 加载 在我的页面上我有这个脚本:

<script type="text/javascript">
        function go(){
            alert('1');
        }
    </script>
<a href="javascript:void();" onClick="go();">GO!!!</a>

没有任何反应。

--编辑--

如果我打开 Google Chrome 的调试器: “ Uncaught ReferenceError :go 未定义” 而且 <script> 标签在哪里都找不到

Answer 1

浏览器似乎无法解析<script>通过 targetElement.innerHTML 添加到文档的元素内容。这可能就是您遇到的情况。

最好的解决方案是使用像 jQuery 这样经过良好测试的框架来解决此类问题。他们已经弄清楚如何安全、正确地将脚本注入(inject) DOM 中。除非您绝对无法为库腾出带宽，否则重新发明轮子是没有意义的。

---

解决此问题的一种方法是在 Ajax 响应中将 JavaScript 与 HTML 分开，方法是发出两个请求(可能会更慢)，或者在 JSON 对象中构建 JavaScript 和 HTML(可能更难维护)。

这是一个例子:

<script>

function load_content(){
  var req = new XMLHttpRequest();
  req.open("GET", "ajax.json", true);
  req.onreadystatechange = function (e){
    if (req.readyState === 4){
      if (req.status === 200){

        // these three lines inject your JavaScript and
        // HTML content into the DOM
        var json = JSON.parse(req.responseText);
        document.getElementById("target").innerHTML = json.html;
        eval(json.js);
      } else {
        console.log("Error", req.statusText);
      }
    }
  };
  req.send(null);
}

</script>

<a href="#" onclick="load_content()">Load more stuff</a>
<div id="target"></div>

文档ajax.json在服务器上看起来像这样:

{
  "js": "window.bar = function (){ console.log(\"bar\"); return false; }",
  "html": "<p><a href=\"#\" onclick=\"bar();\">Log a message</a></p>"
}

如果您选择此路线，您必须:

• 您的函数的命名空间:MyApp.foo = function (){ ... }; ，或
• 将您的函数显式添加到全局命名空间:window.foo = function (){ ... }; .

这是因为eval在当前作用域中执行，因此您的函数定义继承该作用域并且不会全局可用。在我的示例中，我选择了后一个选项，因为它只是一个简单的示例，但您应该知道为什么这是必要的。

请务必阅读 When is JavaScript's eval() not evil?如果您决定自己实现这一点。