Javascript App Windows Universal - Script Issue

Question

I created a Website using material design lite:

Scripts:

   <script src="./mdl/material.min.js"></script>
   <script src="Scripts/angular.min.js"></script>

.css files included in html:

    <link rel="stylesheet" href="./mdl/material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

It is looking like this:

After that I created a new uwp JavaScript Project and mainly just used C&P.

The result is:

Of Course I applied the right source paths for the scripts for uwp. My Uwp Folder structure:

In my uwp the paths are this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="js/mdl/material.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

And in the Body:

<script src="/js/mdl/material.min.js"></script>
<script src="/js/Scripts/angular.min.js"></script>

@MiguelMota That is what I am using look at the end of the post " " — Matthias Herrmann, May 01 '16 at 16:36

score 0 · Accepted Answer · answered May 01 '16 at 20:17

Seems like the problem is actually not with local styles or scripts but with the external one you are using for icons. UWP blocks including external scripts or css-files into pages executed in local context. I would also highlight that it is not recommended per design principles as all your interface-related icons should not depend on internet connection.

You should include that CSS-file for material design icons into your project (and I suppose font-files as well).

score 0 · Answer 2 · answered May 27 '16 at 09:03

Or just hack the security of UWP and use this trick :

    function loadExternalScriptAsync (scriptUrl)
{

    return WinJS.xhr({ url: scriptUrl }).then(function(req) {
        var scriptTxt = req.responseText;
        try
        {
            var bb = new MSBlobBuilder();
            bb.append(scriptTxt);
            var data = bb.getBlob('text/javascript');

            var sc = document.createElement('script');
            sc.setAttribute('src', window.URL.createObjectURL(data));
            document.head.appendChild(sc);
            return true;
        }
        catch (e)
        {
            return false;
        }
    })
},

Which will download the script save it as a blob, and then will be allowed to reference it. Will definitely work for css, and have some limitation for JS since it won't work if the downloaded script try it self to load external script I'm using WinJS.xhr...but any XmlHttprequest will works as well

Romain

Javascript App Windows Universal - Script Issue

2 Answers2