快速入门：为应用创建多个窗口 (HTML)

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

通过允许用户查看单独窗口中的多个独立功能，可帮助他们提高效率。用户可以从一个窗口中的应用的一部分快速切换到另一个窗口中的应用的另一部分。他们还可以比较并列的多个窗口的内容，例如，同时查看两个不同的文档或在单独的窗口中查看游戏排行榜和游戏操作。“邮件”应用使用户能够在新窗口中打开邮件。用户可以编写新邮件，也可以通过使用多个窗口参考收件箱中的邮件。

如果你为应用创建多个窗口，每个窗口都独立运作。最近使用的应用的列表单独显示每个窗口。用户可以独立地移动、调整大小、显示和隐藏应用窗口，并且可以在应用窗口间切换，如同它们是独立的应用。每个窗口都在它自己的线程和执行上下文中运行。

两个窗口处于打开状态的“邮件”应用

本快速指南介绍如何完成下列操作：

为应用创建新窗口
将内容添加到新窗口
显示新窗口
从一个窗口切换到另一个窗口
在窗口从最近使用的应用列表中掉落时关闭它。

这是此快速入门的 JavaScript 版本。对于使用 XAML 的 C# 版本，请参阅快速入门：为应用创建多个窗口 (XAML)。

为应用创建多个窗口不同于将应用的单独窗口投影到另一个屏幕仅用于显示而不用于交互。有关投影窗口的详细信息，请参阅投影管理器指南。

先决条件

如果你没有 Microsoft Visual Studio 2013 和 Windows 8.1，请从下载下载它们。
我们假设你能够创建基本的采用 JavaScript 的 Windows 应用商店应用。有关首次尝试创建应用的帮助，请参阅首次创建使用 JavaScript 的 Windows 应用商店应用。
查看设计带有多个窗口的应用指南。

创建辅助页

在“解决方案资源管理器”中，打开项目节点的快捷菜单，然后选择“添加 > 新建项目”****。
在“添加新项”对话框的中间窗格中，选择“页面控件”****。
在“名称”框中，输入页面的名称，例如 secondaryView，然后选择“添加”按钮。
添加你在辅助页上所需的 UI 元素和功能。有关详细信息，请参阅设置 UI 的布局和多个窗口指南。

创建新视图

通过调用 MSApp.createNewView 创建新线程和该线程上的新窗口。线程和窗口在一起的配对称为视图。你在此视图中创建的其他对象（例如 UI 元素）与此线程相关联。

应用启动时创建的第一个视图称为主视图。如果主视图的窗口关闭，则应用终止。

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");

此代码在新窗口中自动加载指定页面 secondaryView。

由于每个窗口在其自己的执行上下文中运行，因此辅助窗口可以仅通过使用 postMessage 或共享文件和设置与主窗口通信。此代码显示如何使用 postMessage 包含你设置窗口可能所需的附加状态信息。

newView.postMessage({ myState: 'My important state'}, thisOrigin);

显示新窗口

在你创建新视图（即线程和窗口的配对）后，你可以通过使用 ApplicationViewSwitcher.TryShowAsStandaloneAsync 方法显示新窗口。TryShowAsStandaloneAsync 方法中的 viewId 参数是唯一标识应用中的每个视图的整数。你通过使用 ApplicationView.Id 或 ApplicationView.GetApplicationViewIdForWindow 检索视图 ID。

var newView = MSApp.createNewView("ms-appx:///html/secondaryView.html");
newView.postMessage({ myState: 'My important state' }, thisOrigin);
Windows.UI.ViewManagement.ApplicationViewSwitcher.tryShowAsStandaloneAsync(newView.viewId).done(function (viewShown) {

});

建议不要在用户导航到应用的不同部分时自动打开一个新窗口。用户应发起打开新窗口的操作。你可以将 TryShowAsStandaloneAsync 调用添加到 UI 元素，例如，底部应用栏中的命令。

从一个窗口切换到另一个窗口

你必须为用户提供一种途径来从辅助窗口导航回主窗口。要执行此操作，请使用 ApplicationViewSwitcher.SwitchAsync 方法。从要从中切换的窗口的线程调用此方法，并传递要切换到的窗口的视图 ID。

Windows.UI.ViewManagement.ApplicationViewSwitcher.SwitchAsync(viewIdToShow).done();

在“邮件”应用中，辅助窗口上的后退按钮调用 SwitchAsync。当用户发送或删除包含在辅助窗口中的邮件时，“邮件”应用还使用 SwitchAsync。“邮件”应用使用主邮件窗口替换辅助窗口。

当你使用 SwitchAsync 时，你可以选择是否想要关闭初始窗口，并通过指定 ApplicationViewSwitchingOptions 的值将它从最近使用的应用列表中删除。

关闭新窗口

在你显示辅助窗口后，它保留在最近使用的应用列表中，直到用户启动足够的其他应用使其从列表中掉落。如果应用有至少多出一个的窗口保留在列表中，当从最近使用的应用列表中删除窗口时，将发生 consolidated event。由于每个窗口都占用内存，我们建议当它从列表中掉落时关闭窗口。

Windows.UI.ViewManagement.ApplicationView.getForCurrentView().addEventListener("consolidated", viewConsolidated, false);

function viewConsolidated(e) {
    if (!isMainView) {
        window.close();
    }
}

注意不要关闭主视图的窗口，因为这将终止该应用。应用认证过程要求你不要以编程方式关闭应用。仅关闭主窗口以外的其他窗口，如此示例中所示。

摘要和后续步骤

你了解了如何为应用创建和显示多个窗口。你还了解了如何从一个窗口切换到另一个窗口以及如何和何时关闭应用窗口。

要了解使用投影管理器将应用的单独窗口投影到另一个屏幕上的信息，请参阅投影管理器指南。