Navigation issues in winjs application
Question
Am facing issues in the single page navigation model in winjs.
Consider the main page which is default.html .
I load login.html first into default.html with css property.
html, body
{
overflow-x:hidden;
}
Then I navigate to page2.html using WinJS.Navigation.navigate method which has its css property as
html, body
{
overflow-x:visible;
}
On clicking back and going back to the login.html. The overflow-x:visible from the page2.html is being enabled for the login.html including the DOM event listeners of page2.html. How can I disable/dispose the css property and DOM event listeners of page2.html when navigating back to login.html.
2 answers
solution1
1 ACCPTED 2013-12-12 16:54:30
When you're using page controls, you're always staying in the context of default.html, even though you conceptually think of navigating between different HTML pages. As a result, all CSS files that are loaded both from default.html and any page control's .html files are cumulative. That is, they all go into the same overall stylesheet that's being applied.
When you have the same selector in multiple CSS files (as you do with html, body), then whatever styles are in the most recently loaded stylesheet will win and stay in place. This is why your page2.css style affects page 1 after you navigate back. CSS stylesheets are not unloaded with page control navigations because you aren't in fact navigating like you do in a browser: you're just doing DOM replacement inside default.html.
To work around this there are two options. First, you can do a little more work to replace elements in the element. In each page control's init method, remove any elements for whatever styles you want to unload, then append new elements for those stylesheets you want to load.
The other way is to scope your page-specific style rules with a page-specific selector. For example, set "page1" and "page2" classes on your top-level divs, then scope your selectors like ".page1 .myClass" to keep them from interfering with one another. I typically avoid styling html and body differently for this reason, and just use a top-level div as the root element.
I talk about page-specific styling in Chapter 3 of my free ebook Programming Windows Store Apps in HTML, CSS, and JavaScript, Second Edition if you want more details. (The ebook is free, so there's no risk :)). You want to look at the section entitled "Page-Specific Styling."
solution2
0 2013-12-21 06:58:57
Simply wrap your html body content into div and then apply css to it.
Page1
<body>
<div class="page1">
//Your Page1 content
</div>
</body>
CSS
.page1{
overflow-x:hidden;
}
Page 2
<body>
<div class="page2">
//Your Page2 content
</div>
</body>
CSS
.page2{
overflow-x:visible;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.