winjs应用程序中的导航问题

Navigation issues in winjs application

本文关键字：导航 问题 应用程序 winjs      更新时间：2023-09-26

我在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。正在为login.html启用page2.html中的overflow-x:visible，包括page2.html的DOM事件侦听器。当导航回login.html时，如何禁用/处置page2.html的css属性和DOM事件侦听程序。

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

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

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

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

我在我的免费电子书《用HTML、CSS和JavaScript编程Windows商店应用程序》第二版的第3章中谈到了页面特定的样式。（电子书是免费的，所以没有风险：）。您需要查看标题为"页面特定样式"的部分。

只需将html正文内容包装到div中，然后应用css即可。

第1页

 <body>
 <div class="page1">
   //Your Page1 content
 </div>
 </body>

CSS

.page1{
overflow-x:hidden;
}

第2页

 <body>
 <div class="page2">
   //Your Page2 content
 </div>
 </body>

CSS

.page2{
overflow-x:visible;
}
相关文章：