Javascript 应用 Windows 通用 - 脚本问题

Question

我使用 material design lite 创建了一个网站：

脚本：

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

.css 个文件包含在 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">

看起来像这样：

之后我创建了一个新的 uwp JavaScript 项目，主要只是使用 C&P。

结果是：

当然，我为 uwp 脚本应用了正确的源路径。我的 Uwp 文件夹结构：

在我的 uwp 中，路径是这样的：

<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">

在正文中：

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

Answer 1

似乎问题实际上与本地样式或脚本无关，而与您用于图标的外部样式或脚本有关。 UWP 块包括外部脚本或 css-files 到在本地上下文中执行的页面中。我还要强调，根据设计原则不推荐这样做，因为所有与界面相关的图标都不应该依赖于互联网连接。

您应该将 material 设计图标的 CSS 文件包含到您的项目中（我想字体文件也是如此）。

Answer 2

或者破解 UWP 的安全性并使用这个技巧：

    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;
        }
    })
},

它将下载脚本并将其保存为 blob，然后将允许引用它。肯定适用于 css，并且对 JS 有一些限制，因为如果下载的脚本尝试自行加载外部脚本，它将无法工作我正在使用 WinJS.xhr...但是任何 XmlHttprequest 都可以正常工作

罗曼

Javascript 应用 Windows 通用 - 脚本问题

Javascript App Windows Universal - Script Issue

javascript

css

material-design-lite

windows-10-universal