具有本地相对 URL 的 Windows UWP Web 视图



我正在开发一个使用Web视图作为主界面的应用程序。启动时,程序加载一个包含在项目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.

但是,我似乎无法让字体真棒正确加载。据我所知,font-awesome.min.css正在正确加载,因为图标的i标签大小合适(方块(,但它们是空白的,这意味着字体文件未加载。我尝试使用<base>标签,但这似乎不起作用。有什么办法可以做到这一点吗?

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

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

BuildLocalStreamUri

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

XAML 网页视图控件示例

最新更新