javascript - winjs应用程序中的导航问题

Question

我在 winjs 中的单页导航模型中遇到问题。

考虑主页，它是 default.html。

我首先使用 css 属性将 login.html 加载到 default.html 中。

html, body
{
overflow-x:hidden;
}

然后我使用 WinJS.Navigation.navigate 方法导航到 page2.html，该方法的 css 属性为

html, body
{
overflow-x:visible;
}

单击“返回”并返回到 login.html。 page2.html 中的 overflow-x:visible 正在为 login.html 启用，包括 page2.html 的 DOM 事件监听器。当导航回 login.html 时，如何禁用/处置 page2.html 的 css 属性和 DOM 事件监听器。

Answer 1

当您使用页面控件时，即使您从概念上考虑在不同的 HTML 页面之间导航，您也始终处于 default.html 的上下文中。因此，从 default.html 和任何页面控件的 .html 文件加载的所有 CSS 文件都是累积的。也就是说，它们都进入正在应用的相同的整体样式表中。

当您在多个 CSS 文件中具有相同的选择器时(就像您对 html、body 所做的那样)，那么最近加载的样式表中的任何样式都将获胜并保持不变。这就是为什么您的 page2.css 样式会在您返回后影响第 1 页。 CSS 样式表不会随页面控制导航一起卸载，因为您实际上并没有像在浏览器中那样进行导航:您只是在 default.html 中进行 DOM 替换。

要解决此问题，有两种选择。首先，您可以多做一点工作来替换元素中的元素。在每个页面控件的 init 方法中，删除要卸载的任何样式的任何元素，然后为要加载的样式表附加新元素。

另一种方法是使用特定于页面的选择器来确定特定于页面的样式规则的范围。例如，在顶级 div 上设置“page1”和“page2”类，然后将选择器的范围设置为“.page1 .myClass”，以防止它们相互干扰。由于这个原因，我通常会避免对 html 和 body 进行不同的样式设计，而只使用顶级 div 作为根元素。

我在我的免费电子书 Programming Windows Store Apps in HTML, CSS, and JavaScript, Second Edition 第 3 章中讨论了特定于页面的样式。如果您想了解更多详细信息。 (该电子书是免费的，因此没有风险:))。您需要查看标题为“特定于页面的样式”的部分。