javascript - 使用 jQuery 构建 Windows 8 Metro 应用程序

Question

我刚刚开始使用 HTML/JS 进行 Windows 8 开发。在过去的几个月里，我一直专注于针对汽车音响主机和电视的应用程序的 jQuery 开发。

跳到这里，我认为过渡会很简单。我的网站的大部分设计和结构都已确定，并希望遵循我在以前的工作中使用的一些做法。

也就是说，我基本上想创建一个单页应用程序。主要的 default.html 文件将包含顶部导航/标题和另一个 div。另一个 div 将用于加载所有其他页面，即项目中所有单独的 HTML 文件。

所有全局函数和主要功能都将驻留在一个 javascript 文件 application.js 中。然后任何特定于页面的 javascript 将位于每个 HTML 文件的顶部。

我很快意识到这是个问题。使用 jQuery.load() 加载我的页面会导致我的应用程序出现安全错误。

JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.

我真的希望避免学习一堆 Microsoft 特定的东西。我认为他们提供了很多工具，但没有提供，这很棒，也许我只是没有足够地使用它们，但一切对我和我正在尝试做的或已经可以完成的事情来说都感觉太死板了使用 jQuery。我是一个喜欢准确了解正在发生的事情并完全控制它的人。

也看了模板和示例项目，我真的不喜欢所有重复的代码。例如，每个 HTML 文件都声明了所有相同的引用。我想只写一次我的引用和标题栏等部分，而不必在我的项目中复制/粘贴该代码。

有没有办法按照我希望的方式做事，并创建一个单页应用程序？他们有自己的 jQuery .load() 替代品吗？

如能为我指明正确的方向，我们将不胜感激!

编辑 2012 年 8 月 14 日:

我尝试使用这个问题的修复: Using jQuery with Windows 8 Metro JavaScript App causes security error

这消除了安全警告，我可以使用 jQuery.load() 加载 HTML。但是，查看 DOM 资源管理器，我的 HTML 脚本被剥离了。

我也曾尝试将我的 .load() 调用包装在 MSApp.execUnsafeLocalFunction() 中，但我的文件仍然没有所有脚本。给了什么？

Answer 1

我通过简单地更改导致错误的 jQuery 行来修复。

jQuery-1.8.0，第 5566 行:

    append: function () {
        return this.domManip(arguments, true, function (elem) {
            if (this.nodeType === 1 || this.nodeType === 11) {
                self.appendChild(elem);  // problem line
            }
        });
    },

更改为:

    append: function () {
        return this.domManip(arguments, true, function (elem) {
            if (this.nodeType === 1 || this.nodeType === 11) {
                var self = this;
                MSApp.execUnsafeLocalFunction(function () {
                    self.appendChild(elem);
                });
            }
        });
    },