如何加载文件资源 (HTML)
[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发,请参阅 最新文档 ]
学习从各个位置加载文件资源。
你可以访问以下应用文件中的文件资源:作为应用包的一部分传递的文件、包含为组件或框架包一部分的文件、来自应用数据的文件或来自 Web 的文件。你可以在标记(例如 HTML 或通知 XML)中或通过代码(例如 Windows.Web.Http 或 storage 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 属性(如背景图像)的替代方法。