使用按窗口加载和自动刷新行为

项目
01/28/2016

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

Windows 8.1 和之后的版本都支持按窗口加载和自动刷新行为。

JavaScript 应用的每个窗口都具有其自己的资源管理系统 ResourceContext。出现以下情况时 Windows 会更新此 ResourceContext：用户将应用窗口拖至其他 DPI 的监视器、发生诸如语言更改的系统事件，或显式覆盖某个值。

使用资源管理系统解析 JavaScript 应用（通过 ms-appx: 和ms-appx-web: 方案加载）中的资源时，并非所有资源都会检查发出请求的窗口的上下文。使用窗口的 ResourceContext 仅可以解析以下类型的下载：

CSS
- 背景图像
- 边框图像
- 生成的内容：list-style-image 和 content:url()
HTML
- 元素上的背景属性（例如，<body background='logo.png'>...</body>）
- 图像元素的 src 属性（例如，<img src='logo.png' />）
- 嵌入元素的 src 属性（例如，<embed width="100" height="100" src="logo.png" type="image/png" />）
- 对象元素的 data 属性（例如，<object width="100" height="100" data="logo.png" type="image/png" />）
- 使用 <svg> 中 image 元素的 href 属性加载的图像
JavaScript
- XHR (XMLHttpRequest)

如果必须针对窗口的资源上下文解析资源，但该资源不在上述列表（例如用于 <link> 的 CSS）中，则可以使用 XHR 检索正确解析的文件。

另外，JavaScript 应用还支持某些图像的“自动刷新”。这表示，如果窗口的资源上下文更改，则 Windows 运行时会自动（如果需要）重新下载和重新显示相应的图像。以下是为其执行此操作的图像的受支持类型：

CSS

背景图像
边框图像
生成的内容：list-style-image（而非 content:url()）

在 Windows 8.1 和之后的版本中，使用“自动刷新”简化 CSS。

例如，在 Windows 8 中，无须自动刷新，以下是当 DPI 或语言更改时可能需要更新图像的 CSS：

    @media all and (max-resolution: 134dpi) {
        /* Load 100% image when scaled by 100% */
        div.imageBackground:-ms-lang(en) {
            background-image: url('logo.png?s=100&lang=en');
        }
        div.imageBackground:-ms-lang(fr) {
            background-image: url('logo.png?s=100&lang=fr');
        }
    }
    @media all and (min-resolution: 135dpi) {
        /* Load 140% image when scaled by 140% */
        div.imageBackground:-ms-lang(en) {
            background-image: url('logo.png?s=140&lang=en');
        }
        div.imageBackground:-ms-lang(fr) {
            background-image: url('logo.png?s=140&lang=fr');
        }
    }
    @media all and (min-resolution: 174dpi) {
        /* Load 180% image when scaled by 180% */
        div.imageBackground:-ms-lang(en) {
            background-image: url('logo.png?s=180&lang=en');
        }
        div.imageBackground:-ms-lang(fr) {
            background-image: url('logo.png?s=180&lang=fr');
        }
    }

在 Windows 8.1 和之后的版本中，上述 CSS 代码可能就会变为：

    div.imageBackground {
        background-image: url('logo.png');
    }

通过

使用按窗口加载和自动刷新行为

相关主题

其他资源