导航到 Windows 商店应用程序中的另一个 html [英] Navigating to another html in Windows store app

问题描述

我正在尝试找到一种方法来导航到我的应用程序中的另一个 html.我试过 window.location 和 WinJS.Navigation.navigate 但都没有效果.

I am trying to find a way to navigate to another html in my app. I tried window.location and WinJS.Navigation.navigate but none works.

推荐答案

虽然您可以使用 document.location 和导航来工作(并注意它是 document.location，而不是 window.location)，但推荐的方法是实现应用程序就像一个单页网络应用程序，这意味着您可以通过在 default.html/index.html 中的 dong DOM 替换来导航".也就是说，您的页面上下文始终是默认的 HTML 页面，因此您可以跨页面"保留 JavaScript 上下文，并保持在页面内外顺利导航内容的能力.(document.location 和 links 通过黑屏转换并重置 JS 上下文.)

Although you can get document.location and navigation to work (and note that it's document.location, not window.location), the recommended approach is to implement the app like a single-page web application, meaning that you "navigate" by dong DOM replacement inside default.html/index.html. That is, you're page context is always the default HTML page, so that you preserve the JavaScript context across "pages" and also keep the ability to navigate content in and out of the page smoothly. (document.location and links transition through a black screen and reset the JS context.)

DOM 替换有多种方法，但 WinJS 中内置的机制称为 WinJS.UI.Pages.探索该机制的最佳方法是使用导航模板创建一个新的应用程序项目.这给你的是，简要地说:

There are various ways to go about DOM replacement, but the mechanism built into WinJS is called WinJS.UI.Pages. The best way to explore the mechanism is to create a new app project using the Navigation template. What this gives you is, briefly:

• 主页 default.html，即单个 HTML 页面上下文.这声明了一个包含 Application.PageControlNavigator 控件的 div，该控件使用对主页"页面的引用进行初始化.
• 一个 pages 文件夹，其中包含 home/home.html、.js 和 .css(请注意，这些将被拆分到通用应用项目中的共享文件夹中).
• js 文件夹中的 navigator.js 文件，默认从 default.html 加载.这是一段代码，它侦听 WinJS.Navigation.navigate 调用并使用 WinJS.UI.Pages 机制加载并导航到使用 DOM 替换的另一个页面(您实际上保留在 default.html 中).它专门查找 default.html 中的 PageControlNavigator 控件，所有 DOM 替换都发生在该 div 中.

在此模型中，home.html 是您的第一页.要创建其他页面，请右键单击页面文件夹并选择添加 > 新项目 > JavaScript > 页面控制.这将为另一个 WinJS页面"提供另一组 HTML、CSS 和 JS 文件，特别是包含 WinJS.UI.Pages.define 调用以设置必要对象结构的 JS.

In this model, home.html is your first page. To create additional pages, right click on the pages folder and select Add > New Item > JavaScript > Page Control. This will give you another set of HTML, CSS, and JS files for another WinJS "page", specifically with the JS containing a WinJS.UI.Pages.define call to set up the necessary object structure.

您可以移动这些文件——只需确保项目中 HTML 文件的路径与 WinJS.UI.Pages.define 调用以及导航调用中的完全匹配，否则页面将无法运行t 负载.

You can move these files around--just make sure the path to the HTML file in the project is exactly matched in the WinJS.UI.Pages.define call as well as in your navigate calls, or else the page won't load.

有关更完整的详细信息，请参阅我的免费电子书 使用 HTML、CSS 和JavaScript，第 2 版，从第 136 页的页面控件和导航"开始.

For more complete details, see Chapter 3 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, starting on page 136 in "Page Controls and Navigation."

这篇关于导航到 Windows 商店应用程序中的另一个 html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！