具有本地相对URL的Windows UWP Webview

时间:2017-08-21 03:13:15

标签: html webview uwp windows-10

我正在开发一个使用webview作为主界面的应用程序。启动时,程序会加载一个页面,该页面包含在项目的Content目录中,包含外部样式表和脚本,并且它们都正确加载。要加载的代码是:

webViewer.Navigate(new Uri("ms-appx-web:///Content\\landing.html"));

landing.html的内容如下。一切正常。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <base href="ms-appx-web://58377ramsays.studios.chordwriter/Content/" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
    <title></title>
</head>
<body>
    ...
</body>
</html>

当我尝试使用NavigateToString()将呈现的内容加载到查看器中并尝试使用这些样式表,特别是FontAwesome时,出现了一个问题。我正在使用以下代码加载文件:

webViewer.NavigateToString(song.RenderHtml(appSettings));

RenderHtml()函数看起来像这样:

string content = @"<DOCTYPE html>
<html>
  <head>
    <base href=""ms-appx-web://58377ramsays.studios.chordwriter/Content/"" />
    <link rel=""stylesheet"" type=""text/css"" href=""css/font-awesome.min.css"" />
    <style type=""text/css"">
      body { font-family: Tahoma, Geneva, sans-serif;
        margin: 15px;
        font-size: " + settings.Values["settingsFontSize"] +  @"pt; }
      span.flat { margin: -4px -2px;
        font-family: 'Lucida Sans Unicode','Lucida Grande',sans-serif;
        font-size: 1.2em;
        height: 0.9em;
        display: inline-block; }
      h3 { font-size: 1.5em; }
      th a { text-decoration: none;
        font-weight: bold;
        color: #127690; }
      td a { text-decoration: none;
        font-weight: normal;
        color: #000; }
      i { color: #000;
        width: 1em; }
    </style>
  </head>
    <body>";
// Rest of rendering function.

但是我似乎无法正确加载FontAwesome。据我所知,font-awesome.min.css正在正确加载,因为图标'i标签的大小合适(方块)但它们是空白的,这意味着没有加载字体文件。我尝试使用<base>标记,但这似乎不起作用。有没有办法让这项工作?

编辑:我编辑了样式表并将字体文件的完整网址硬编码到其中,但仍然无效。

1 个答案:

答案 0 :(得分:0)

您似乎可能需要使用BuildLocalStreamUri / NavigateToLocalStreamUri。在这种情况下,字符串传递的html不能引用css文件夹的内容。您需要构建包含字符串,css或其他外部文件的“流”。 以下是api参考:

BuildLocalStreamUri

您可能还需要参考样本。使用起来很复杂。

XAML WebView control sample