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

Question

我正在使用HTML/JS开始学习Windows 8开发。在过去几个月中，我一直专注于为针对车辆音响和电视的应用程序进行jQuery开发。

刚开始时，我认为这种转换会很简单。对于我的大部分工作来说，我已经设计好了站点的结构和布局，并希望遵循我以前使用的一些做法。

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

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

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

JavaScript运行时错误：无法添加动态内容。脚本尝试注入动态内容或先前通过动态方式修改的元素，可能不安全。例如，使用innerHTML属性添加脚本或格式不正确的HTML将生成此异常。使用toStaticHTML方法过滤动态内容，或使用createElement等方法显式地创建元素和属性。

我真的希望避免学习大量的Microsoft特定内容。我认为他们提供了很多工具等，也许我还没有足够使用它们，但对于我正在尝试做的事情或使用jQuery已经能够实现的事情来说，一切看起来都过于僵硬。我是一个喜欢确切知道发生了什么并拥有完全控制权的人。

此外，浏览模板和示例项目时，我真的不喜欢所有重复的代码。例如，每个HTML文件都声明了所有相同的引用。我希望只写一次我的引用和部分，比如我的标题栏，并且不必将该代码复制/粘贴到我的整个项目中。

有没有一种方法可以按照我希望的方式创建单页应用程序？它们是否有自己的替代品来取代jQuery的.load()方法？

任何指向正确方向的帮助都将不胜感激！

编辑8/14/2012：

我尝试使用这个问题的解决方法：在Windows 8 Metro JavaScript应用程序中使用jQuery会导致安全错误

这样可以去除安全警告，并且我可以使用jQuery.load()方法加载HTML。但是，在DOM浏览器中查看时，我的HTML正在被剥离脚本。

我还尝试将我的.load()调用包装在MSApp.execUnsafeLocalFunction()中，但是我的文件仍然被剥离了所有脚本。怎么回事？

- Danny

---

+1 提醒 jQuery 在 Windows 8 中可能无法“允许”加载，迫不及待想看到这个问题的答案！ - Michiel Cornille

可能是重复的问题：在Windows 8 Metro JavaScript应用程序中使用jQuery会导致安全错误，该问题也有一个可能有帮助的答案。 - nfechner

尝试了那个修复方法。我不再收到错误信息了，但我的页面上加载的脚本仍然无法执行。 - Danny

脚本是如何出现在文档中的？如果你在调用加载后查看DOM资源管理器，它们是否被注入了？ - Dominic Hopton

可能是从Javascript绑定到MetroStyle应用程序中的InnerHTML的重复问题。 - JP Alioto

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

- Danny

Answer 2

有一种“正式”的方法可以实现您正在寻找的内容。
WinJS.Navigation是提供支持“单页面应用程序”的工具。例如，default.html将包含一个标记，表示动态加载的页面内容将放置在哪里：

<div id="contenthost" 
    data-win-control="Application.PageControlNavigator" 
    data-win-options="{home: '/pages/home/home.html'}">
</div>

在上面的示例中，实际加载的内容页位于/pages/home/home.html。

在事件处理程序中，您可以简单地执行以下操作以加载或导航到另一个页面：

WinJS.Navigation.nav("/pages/other/page.html");

没错，它不是jQuery，但它也很好用 :)

- Michael Palermo

---

我想这就是我的唯一选择了。现在我已经习惯了，也不那么糟糕了。 - Danny

Answer 3

根据您的应用程序，如果您不打算访问任何WinRT组件，则可以将页面导航到ms-appx-web，这将改变页面周围的安全策略，但您无法从启动时指定此选项。您必须进行导航，并利用该新的安全上下文。

您还有另一个选择，即使用msWWA.execUnsafeLocalFunction函数包装对JQuery的调用，这将使所有不安全的代码被推入DOM。

- Dominic Hopton

---

我将jQuery的.load()包裹在execUnsafeLocalFunction中，但仍然没有运气。通过DOM浏览器查看，我的页面上的脚本已经被剥离了。 - Danny

你有没有逐步执行 JQuery 中插入脚本的代码？会发生什么？ - Dominic Hopton