Using jQuery with Windows 8 Metro JavaScript App causes security error

Question

Since it sounded like jQuery was an option for Metro JavaScript apps, I was starting to look forward to Windows 8 dev. I installed Visual Studio 2012 Express RC and started

Answer 1

You need to edit the jQuery source so that you pass the jQuery.support function to MSApp.execUnsafeLocalFunction, which disables the unsafe content checking, like this:

jQuery.support = MSApp.execUnsafeLocalFunction(function() {

    var support,
        all,
        a,
        select,
        opt,
        input,
        fragment,
        tds,
        events,
        eventName,
        i,
        isSupported,
        div = document.createElement( "div" ),
        documentElement = document.documentElement;


    // lots of statements removed for brevity

    return support;
});

You need to remember to remove the last pair of parenthesis - you don't need a self-executing function because execUnsafeLocalFunction automatically executes the function it is passed.

I suggest that a better approach is to use the WinJS features - this includes the WinJS.Promise object as an alternative to deferred operations (which are themselves an implementation of the Promise pattern). And you can do some basic DOM manipulation using the WinJS.Utilities namespace.

You should think twice about using jQuery for deferred operations. The WinJS.Promise object is used throughout the Metro APIs to represent async activities and you will end up using two similar-but-different approaches.

Answer 2

Here is your answer

https://github.com/appendto/jquery-win8

Its official jquery library for windows 8

Answer 3

jQuery itself did not throw such exceptions for me in the latest version as long as I replaced all code of the form e.g.:

$('<input type="button" value="Press Me" />')

with

$(toStaticHTML('<input type="button" value="Press Me" />'))

Note that not all HTML strings are considered unsafe e.g.:

$('<span></span>')

Does not throw any exceptions. However jQuery still throws exceptions on append if you do something of the sort:

var div = '<div class="' + classesToApply + '"';
div += attrToAdd;
div += '</div>';

$(div).appendTo(container);

The above is not an example for good practices using jQuery still some people do it so you may encounter the error. Notice the above code does not generate the same error as the very first snippet but instead throws the error inside jQuery.append. This error is still fixed via performing $(toStaticHTML(div)).appendTo(container);

Answer 4

The JavaScript Dynamic Content shim on GitHub was created and released by Microsoft Open Technologies to address this error. It has not been tested with jQuery but will most likely solve your problem. Reference the winstore-jscompat.js file in the beginning of your app before any other scripts are run and you should no longer see this error.

Answer 5

I wrote a pretty detailed explanation on how to get jQuery to work with Windows 8 here http://davidvoyles.wordpress.com/2013/09/23/hacking-jquery-to-work-in-windows-8/