快速入門：為應用程式建立多個視窗 (HTML)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

您可以讓使用者以個別的視窗檢視多個獨立功能，幫助他們提高生產力。使用者能夠從一個視窗中的某應用程式功能迅速切換到該應用程式在另一個視窗中的其他功能。他們也能並排比較多個視窗的內容，例如，同時檢視兩份不同的文件，或是在個別的視窗檢視遊戲排行榜和遊戲動作。郵件應用程式允許使用者以新的視窗開啟郵件。使用者可以使用多個視窗，一邊撰寫新郵件，一邊參考收件匣中的郵件。

如果您為應用程式建立多個視窗，每個視窗的行為都是各自獨立的。最近使用的應用程式清單會個別顯示每個視窗。使用者可以單獨移動、調整大小、顯示及隱藏應用程式視窗，也可以在應用程式視窗之間切換，就像是不同的應用程式一樣。每個視窗都會以自己的執行緒與執行內容運作。

開啟兩個視窗的郵件應用程式

本快速入門說明如何：

為應用程式建立新視窗
將內容新增到新視窗
顯示新視窗
從一個視窗切換到另一個視窗
當視窗不在最近使用的應用程式清單中，即關閉該視窗

這是本快速入門的 JavaScript 版本。如需 C# 搭配 XAML 的版本，請參閱快速入門：為應用程式建立多個視窗 (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 可抓取檢視識別碼。

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 方法。您可以從原來的視窗執行緒呼叫此方法，然後傳送切換目的地視窗的檢視識別碼。

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

注意請勿關閉主要檢視的視窗，這樣做會終止該 app。應用程式憑證處理程序要求您不得以程式設計的方式關閉 app。如本範例所示，只關閉主要視窗以外的視窗。

摘要與後續步驟

您已經了解如何為應用程式建立和顯示多個視窗。您也了解如何從一個視窗切換到另一個視窗，以及關閉應用程式視窗的方式和時機。

若要深入了解使用投影管理員將應用程式的個別視窗投影到另一個畫面，請參閱投影管理員的指導方針。

共用方式為