Geek Answers Handbook

WinJS does not unload js / css

I am working on a Windows 8 Metro application, and I found (even in my application examples where I didn’t touch the code) that when moving between pages the top level “default.html” acquires every single js and css file ever loaded into application launch time.

This causes me a lot of headaches, as my css collides between different pages. Am I missing something or is this a serious mistake?

+7
source share
4 answers

Do not unload JavaScript and CSS was a deliberate choice, not an accident or oversight.

First of all, understand that page controls are just a JavaScript construct - the browser is unaware of this. The browser just sees a piece of the DOM that is dynamically generated by scripts.

The web platform does not allow you to download script files - as soon as they are loaded into the context, they are there forever.

Using CSS, they might try to remove the tags, but it opens a jar of worms. Depending on which pages of the order are sent, you can use different styles used in one application. What if two pages belong to the same stylesheet? Do you add the same link tags twice? And which one are you deleting?

This is a mess. Instead, WinJS ensures that scripts and stylesheets will be loaded once and only once when they reference them. Thus, you can have each page in the link to the application "myStyles.css", and it will load only once (and there will be only one style tag).

So what do you do to prevent the problems you see? First, remember that you are creating an application, not a website, that will arbitrarily grow new content. Decide your common styles and classes. Put the general style in your default.css and refer to it from the default.html file.

For individual pages, the easiest way is to attach your styles to the page name. Instead:

<div class='intro'></div>

do

 <div class='page1-intro'></div>

Then you are guaranteed to avoid collisions.

If you link to page elements by ID, do not do this. Using the identifier on the pages causes all kinds of potential oddities (what if you perform the same page management at the same time? The identifier does not exist until the page is loaded into the DOM, which means that the data, option links by ID do not work) . But if you insist, again, consider the identifier prefix with the page.

Basically, create special namespaces so you don't run into. This is much easier than hacking link tags manually and will lead to a much better experience with applications than doing full navigation.

+13
source

This is not a mistake, it is part of the default application template used by tempaltes WinJS. WinJS templates use a single-page model by default, which means that all content is loaded into the default.html file using PageNavigatorControl. As a result, at all times there is one DOM memory. If you followed a similar pattern in a regular browser, you will see the same behavior.

You can, if you wish, use more traditional navigation using multiple pages and traditional href links. This is not a recommended approach, but if you are trying to list existing web resources created using this model, this will simplify the situation.

+3
source

You can solve this problem by requesting a document for link elements that import your styles and disable those that you don't need. You need to make sure that you do not disable the MS CSS files and the default.css file in your project if you use it to define common styles for your application.

Here is an example that shows you how to do this. This is a file called page2.html that, when loaded with the WinJS.Pages.UI.render method, WinJS.Pages.UI.render detect and disable link elements that it does not want. It ensures that the page2.css file is included and saves a list of files that it simply ignores.

(I put this in the ready handler function, but I try to use this technique in the WinJS.Navigation event handler and rely on the consistent file name to get the result I want).

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>UnloadCSS</title> <!-- WinJS references --> <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> <script src="//Microsoft.WinJS.1.0/js/base.js"></script> <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> <!-- UnloadCSS references --> <link href="/css/page2.css" rel="stylesheet" /> <script> WinJS.UI.Pages.define("/page2.html", { ready: function () { var ignoreList = ["/css/ui-dark.css", "/css/ui-light.css", "/css/default.css"]; var myCSS = "/css/page2.css"; WinJS.Utilities.query("link").forEach(function (linkElem) { if (linkElem.href.indexOf(myCSS) > -1) { linkElem.disabled = false; } else { var ignore = false; ignoreList.forEach(function (ignoreItem) { if (linkElem.href.indexOf(ignoreItem) > -1) { ignore = true; } }); if (!ignore) { linkElem.disabled = true; } } }); } }); </script> </head> <body> <button>Change </button> </body> </html>
0
source

this might be a good solution with aproach convention names:

 var currentPage = Application.navigator.pageControl.uri.replace("ms-appx://" + Windows.ApplicationModel.Package.current.id.name.toLowerCase(), ""); var currentCss = currentPage.replace(".html", ".css"); var ignoreList = ["/css/ui-dark.css", "/css/ui-light.css", "/css/default.css"]; WinJS.Utilities.query("link").forEach(function (linkElem) { if (linkElem.href.toLowerCase().indexOf(currentCss) > -1) { linkElem.disabled = false; } else { var ignore = false; ignoreList.forEach(function (ignoreItem) { if (linkElem.href.toLowerCase().indexOf(ignoreItem.toLowerCase()) > -1) { ignore = true; }}); if (!ignore) { linkElem.disabled = true; } } });
0
source

More articles:


All Articles