Cómo cargar recursos de archivos (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Aprende a cargar recursos de archivos de varias ubicaciones.
Puedes tener acceso a recursos de archivo en archivos de aplicaciones que entregues como parte del paquete de la aplicación, o que incluyas como parte de un componente o paquete de marco, o desde los datos de la aplicación o la web. Puedes hacer referencia a estos archivos en el marcado (como HTML o XML de notificaciones) o a través de código (como las API Windows.Web.Http o storage file). Los ejemplos que se incluyen aquí muestran los recursos de archivo en contextos específicos, pero puedes usar la mayoría de ellos en otros muchos contextos.
Web
Para acceder a archivos desde la Web, puedes usar URI HTTP absolutos estándar.
<img src="https://www.contoso.com/images/logo.png" alt="Logo" />
Paquete de la aplicación
Para tener acceso a los archivos desde el paquete de la aplicación, puedes usar un trazado de archivo lógico o directo para hacer referencia al recurso. Esto se cumple aunque los archivos tengan varios idiomas, escalas, contrastes u otras variaciones, como calificadores en el nombre de archivo. Consulta Inicio rápido: uso de recursos de archivos o imágenes para obtener una introducción.
Por ejemplo, carga
Images/en-US/homeregion-USA/logo.scale-100_contrast-white.png
haciendo referencia a
Images/logo.png
Para tener acceso a los archivos relativos al documento actual del marcado, puedes usar URI relativos.
<img src="images/logo.png" />
Para acceder a los archivos relativos a la raíz del paquete, puedes usar un URI de ruta de acceso absoluta (que comience con "/").
<img src="/images/logo.png" />
Para acceder a los archivos almacenados en el mismo paquete, pero desde una biblioteca de clases, usa el nombre de la biblioteca de clases:
<img src="/ClassLibraryName/images/logo.png" />
Para tener acceso a archivos almacenados dentro del paquete de la aplicación, pero desde código donde no hay ninguna raíz inferida de documento base, usa el esquema ms-appx:.
var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
Para tener acceso a archivos almacenados en un paquete de marco o biblioteca que se incluye con la aplicación, usa un URI absoluto (y el esquema ms-appx:).
<script src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>
Para tener acceso a archivos que se cargarán en el compartimento web, usa el esquema ms-appx-web:.
<iframe src="ms-appx-web:///html/webcompartment.html"></iframe>
Para acceder a archivos en el mismo compartimento web o local que el documento actual, no especifiques un esquema.
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
Datos de aplicación
Para tener acceso a archivos almacenados en los datos de la aplicación, usa el esquema ms-appdata:. Se pueden almacenar datos de la aplicación en una carpeta local, roaming o temp.
Para tener acceso a los archivos almacenados en la carpeta local:
<img src="ms-appdata:///local/images/logo.png" />
Para tener acceso a los archivos almacenados en la carpeta roaming:
<img src="ms-appdata:///roaming/images/logo.png" />
Para tener acceso a los archivos almacenados en la carpeta temp:
<img src="ms-appdata:///temp/images/logo.png" />
Las storage file APIs pueden acceder a los archivos dentro del paquete de la aplicación de la misma manera:
var uri = new Windows.Foundation.Uri('ms-appdata:///local/images/logo.png');
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).done(function (file) {
...
});
Eventos y cambios de contexto
Tu aplicación se encarga de actualizar la visualización de sus recursos cuando sea necesario.
Las aplicaciones de la Tienda Windows pueden ejecutarse cuando cambia el sistema, como cuando el usuario activa el contraste alto. Como resultado, la aplicación usa un conjunto distinto de calificadores. Hay varios cambios del sistema que invocarán eventos en el objeto ResourceContext.
En JavaScript, la forma más simple de detectar estos eventos es mediante el método addEventListener.
WinJS.Resources.addEventListener('contextchanged', refresh, false);
Los elementos de imagen no se cargan automáticamente cuando cambia el contexto y la aplicación se encargará de reemplazar las imágenes. Las consultas de medios CSS son una alternativa que actualizará inmediatamente las propiedades de CSS, como la imagen en segundo plano.
Temas relacionados
Cómo cargar recursos de cadenas