Blog

11
March 2015

Gavin Pickin

Windows Store Metro App issues with jQuery Ember Angular - Solved

Angular, Javascript, jQuery, Mobile Development, Techie Gotchas

During my recent adventures with cross platform app development, I have come across a few issues,.. and solved them along the way. I had an old issue just reappear. Since the Windows Platform gives you Javascript API access to some lower level features, there are some additional security you have to deal with, one of those includes Adding Dynamic Content. This of course is a key part of jQuery, Ember, Angular and Knockout, so this by default will make developing apps for the windows store and windows devices troublesome.

Text from Image: Javascript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information...

I had run into this previously, and you will find a lot of information how jQuery 1.x was facing this issue, and appendTo released a fix. When jQuery 2.0 came out, they pulled the fix, and jQuery 2.0 worked. I had my app running great, and then just recently it stopped again, so I had to find another solution. All of these information refers to 2013, and 2014, and it seems like this issue reemerged in 2015.

Solution Options?

There are ways you should wrap all of your dangerous calls with a special function, like this.

MSApp.execUnsafeLocalFunction(function () {
     $(‘#myDiv’).innerHTML = “I’m dangerous”;
}

 

Of course, you would have to find all such occurrences in your code, and in the source files, which is troublesome to say the least.
This is also not very cross platform friendly, unless you shim that as well.

I found no great out of the box solution, until I ran across one of my new favorite companies. MS OpenTech. Microsofts Open Source company, which I used previously when looking for a cross platform storage options, and how they solved that with a WebSql wrapper of SqLite. What they did in this case, is build a special shim, which works for all the common networks, and only runs in the case it is needed. The solution is Winstore-JSCompat
The github repo is here: https://github.com/MSOpenTech/winstore-jscompat

As long as you include this file early in your page, it will run, and shim all the dangerous functions so your code works, without all the headaches.
I dropped it in, and hey presto, that annoying message is gone, and my App is now running in my Windows 8 simulator. Well, it was, until I hit some WebSql syntax that it didn’t like. I’ll save that for another post.

Again, well done MS OpenTech.

Blog Search