如何加载文件资源 (HTML)

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]

学习从各个位置加载文件资源。

你可以访问以下应用文件中的文件资源:作为应用包的一部分传递的文件、包含为组件或框架包一部分的文件、来自应用数据的文件或来自 Web 的文件。你可以在标记(例如 HTML 或通知 XML)中或通过代码(例如 Windows.Web.Httpstorage file API)引用这些文件。下面的示例显示了特定上下文中的文件资源,但是你可以在各种其他上下文中使用大多数资源。

Web

要访问来自 Web 的文件,你可以使用标准的绝对 HTTP URI。

<img src="https://www.contoso.com/images/logo.png" alt="Logo" />

应用包

要访问来自应用包的文件,你可以使用直接或逻辑文件路径引用资源。即使文件有多种语言、比例、对比度或其他变体作为文件名中的限定符也可以这样做。请参阅快速入门:使用文件或图像资源了解相关说明。

例如,加载

Images/en-US/homeregion-USA/logo.scale-100_contrast-white.png

时引用

Images/logo.png

要相对于标记中的当前文档访问文件,你可以使用相对 URI。

<img src="images/logo.png" />

要相对于包的根目录访问文件,你可以使用绝对路径 URI(以 "/" 开头的 URI)。

<img src="/images/logo.png" />

要从一个类库访问存储在同一个包中的文件,可使用类库名称:

<img src="/ClassLibraryName/images/logo.png" />

要从代码访问存储在应用包中的文件,但代码中没有任何从基文档推断的根目录,请使用 ms-appx: 方案。

var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
   ...
});

要访问存储在应用附带的框架或库程序包中的文件,请使用绝对 URI(和 ms-appx: 方案)。

<script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

要访问将加载到 Web 区域中的文件,请使用 ms-appx-web: 方案。

<iframe src="ms-appx-web:///html/webcompartment.html"></iframe>

要访问与当前文档相同的 Web 或本地区域中的文件,请不要指定架构。

<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

应用数据

要访问存储在应用数据中的文件,请使用 ms-appdata: 方案。 应用数据可存储在 local 文件夹、roaming 文件夹或 temp 文件夹中。

要访问存储在 local 文件夹中的文件:

<img src="ms-appdata:///local/images/logo.png" />

要访问存储在 roaming 文件夹中的文件:

<img src="ms-appdata:///roaming/images/logo.png" />

要访问存储在 temp 文件夹中的文件:

<img src="ms-appdata:///temp/images/logo.png" />

storage file APIs 可以采用相同的方式访问应用程序包中的文件:

var uri = new Windows.Foundation.Uri('ms-appdata:///local/images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
   ...
});

事件和上下文更改

你的应用负责更新其资源的显示(如有必要)。

Windows 应用商店应用在系统更改时可能处于运行状态,如用户打开高对比度时。这将导致应用使用一组不同的限定符。各种系统更改将调用 ResourceContext 对象上的事件。

在 JavaScript 中,侦听这些事件的最简单方式是通过 addEventListener 方法:

WinJS.Resources.addEventListener('contextchanged', refresh, false);

当上下文更改时,不会自动更新图像元素,应用程序负责替换这些图像。CSS 媒体查询是一个将立即更新 CSS 属性(如背景图像)的替代方法。

相关主题

如何加载字符串资源

URI 方案

定义应用资源

应用资源和本地化