為什么WinJS Navigation應用程序將CSS應用於任何訪問過的頁面？

Question

我開發了WinJS Navigation應用程序（Windows 8.1 / WP 8.1），存在一個問題：我僅將.css文件鏈接到一個.html文件，但是當我轉到任何其他.html頁面並且如果它具有任何相同的類時， 則該應用程序從我進入的第一頁開始申請.css ！

• 我不將該.css鏈接到主機（default.html）。
• 這不取決於我使用哪個Visual Studio。
• 我在WinJS 2.0、3.0和4.4.0中有相同的錯誤。

有一個問題：WinJS為什么要這樣做？ 有什么解決方案或解決方法嗎？

您可以在VS2013或VS2015上重現我的問題： zip （調試Windows項目，而不是WindowsPhone）。

Answer 1

使用WinJS導航和頁面控件時，“導航”是在default.html或單個根應用頁面的單個上下文中進行DOM替換而發生的，而不是通過轉儲default.html（以及已加載的所有CSS / JS）進行的）並初始化了一個新的頁面上下文。

這種單頁導航模型具有幾個優點：它保留了全局JavaScript上下文，並允許您進行動畫/轉換以在頁面上和頁面外移動元素。 如果您真的完全導航到一個新頁面，則將重置JS上下文，並且將始終在空白頁面中導航。

正如您所看到的，副作用是在頁面導航過程中加載的所有CSS都是累積的。 也就是說，WinJS中的“導航”不會重置任何上下文（包括CSS），並且管理起來很棘手。 有幾種解決方法：

1. 使用全局CSS文件，並避免使用特定於頁面的CSS，除非您知道某個頁面特有的內容。
2. 確保每個頁面都有一個頂級div，其具有頁面名稱類，例如<div class="page1"> ，然后使用.page1選擇器將該頁面的所有樣式范圍化。
3. 通過修改頁面標題中的<link>標記來特別地加載和卸載CSS文件。 這確實是卸載CSS的唯一方法，但也意味着重新加載和重新分析CSS文件，這將導致頁面重新呈現。

總的來說，我認為選項2是最好的，也是最可移植的。

有關更長的文章，請參閱免費電子書“ 使用HTML，CSS和JavaScript對Windows Store應用程序進行編程，第二版 ”的第3章中的“特定於頁面的樣式”部分，並且我已經在博客http://www.microsoft.com/en-us/library/library/library/blog.asp ：//www.kraigbrockschmidt.com/2013/05/02/css-loading-behaviors-winjs-page-controls/ 。