javascript - 在通过 AJAX 加载的 DOM 中运行动态注入(inject)的 javascript(尝试使用 history.js 对网站进行 ajax 化)

Question

我有一个 Web 应用程序，它基本上具有页眉、页脚和正文 View 。我正在使用 history.js 库和 HTML5 pushstate 对网站进行 ajax 化，但我遇到的问题之一是在将 javascript 插入 DOM 时让嵌入式 javascript 运行。

几乎所有我的 javascript 都包含在 jQuery(function(){ ... })(文档就绪加载器)

有人知道处理这个问题的好策略吗？谢谢!

Answer 1

如果我理解您的意思，您的“页面”只是您正在动态加载的 HTML 的容器。在该 HTML 中，您有当前不执行的 JavaScript 脚本 block 。那是对的吗？它们是在页面脚本中还是在新脚本文件的链接中？

无论如何，我认为这回答了您的问题:How do you execute a dynamically loaded JavaScript block?

我自己的想法:

除非你的容器非常通用，所以不知道你可能需要什么 JavaScript，最简单的方法可能是手动将所有 JavaScript 附加到你的容器页面，以便它与容器一起加载，可能是缩小和连接到一个文件中。

如果您需要动态加载您的脚本，但您知道它们是什么，您可以使用 jQuery 使用 .getScript() 或 .ajax() 来实现。我认为此页面拼写得很好，http://www.electrictoolbox.com/jquery-dynamically-load-javascript-file/ .

同样，如果您在获取 html block 之前不知道需要什么脚本，您可能可以解析脚本链接的 html 并通过添加到页面的新脚本元素手动附加它们。例如，如果 jQuery 尚不存在，下面的脚本会将它添加到页面。

(function () {

    if (typeof(jQuery) == "undefined") {
        var headID = document.getElementsByTagName("head")[0];         
        var newScript = document.createElement('script');
        newScript.type = 'text/javascript';
        newScript.id = 'myjQuery';
        newScript.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js';
        headID.appendChild(newScript);
    }

    window.addEventListener('load', function (e)  {

        //make jQuery calls here.

    }, false);

})();