Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Cómo recibir HTML (aplicaciones de la Tienda Windows con JavaScript y HTML)

El contenido HTML puede constar de distintos tipos de contenido, incluidos texto, imágenes y otra información. Aquí te mostramos cómo tu aplicación puede recibir el contenido HTML que un usuario quiere compartir.

Al agregar esta funcionalidad a tu aplicación, considera también la posibilidad de aceptar contenido con formato de texto. El texto se puede convertir fácilmente a formato HTML, por lo tanto, la inclusión de compatibilidad para este formato te puede ayudar a asegurarte de que tu aplicación esté disponible con más frecuencia para los usuarios. Para obtener más información, consulta Cómo recibir texto.

Lo que debes saber

Tecnologías

Requisitos previos

  • Debes estar familiarizado con Microsoft Visual Studio 2012 y sus plantillas asociadas.
  • Debes estar familiarizado con JavaScript.

Instrucciones

Paso 1: Admite el Contrato para aceptar contenido compartido.

Antes de que tu aplicación pueda recibir contenido compartido, debes declarar que tu aplicación admite el Contrato para aceptar contenido compartido. En esencia, este contrato hace que el sistema sepa que tu aplicación está disponible para recibir contenido. Si usas una plantilla de Microsoft Visual Studio para crear tu aplicación, aquí te mostramos como admitir el Contrato para aceptar contenido compartido:

  1. Abre el archivo de manifiesto. Su nombre debe ser similar a package.appxmanifest.
  2. Abre la pestaña Declaraciones.
  3. Elige la opción Compartir destino en la lista Declaraciones disponibles.

Paso 2: Especifica que tu aplicación admite contenido HTML.

Para especificar la compatibilidad con el contenido HTML como formato de datos:

  1. Abre el archivo de manifiesto.
  2. En la sección Formatos de datos, haz clic en Agregar nuevo.
  3. Escribe html.

Nota  Puedes especificar un punto de entrada de diferente cuando tu aplicación se activa para el Contrato para aceptar contenido compartido. Para ello, modifica la entrada Página de inicio en la sección Configuración de la aplicación de la declaración Compartir contenido, en el manifiesto de la aplicación. Es muy recomendable que uses también un archivo de JavaScript diferente para administrar la activación de esta página. Para ver un ejemplo, consulta Muestra de una aplicación de destino de contenido compartido.

Paso 3: Agrega un controlador de eventos para detectar el momento en que se activa tu aplicación.

Cuando un usuario selecciona tu aplicación para compartir contenido, Windows la activa. Debido a que hay muchas maneras en las que Windows puede activar tu aplicación, necesitas agregar el código que detecta el motivo por el que se produjo la activación al controlador del evento activated. Para hacer esto, debes activar el valor de la propiedad kind.


app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        // The application has been launched. Initialize as appropriate.
    } else if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
        ...
    }
};

Si usas una página de inicio dedicada para el Contrato para aceptar contenido compartido, puedes omitir la comprobación de la propiedad kind

Paso 4: Obtén el objeto ShareOperation.

El objeto ShareOperation incluye todos los datos que tu aplicación necesita para obtener el contenido que un usuario quiere compartir.


shareOperation = args.detail.shareOperation;

Paso 5: Vuelve rápidamente del controlador del evento activado.

El controlador del evento activated debe volver rápidamente. Pon en cola un evento asincrónico del controlador del evento activated para que el procesamiento de los datos compartidos se realice después de que vuelva el evento activado.


WinJS.Application.addEventListener("shareready", shareReady, false);
WinJS.Application.queueEvent({ type: "shareready" });

Los pasos restantes implementan la función shareReady.

Paso 6: Comprueba si DataPackageView incluye contenido HTML.

El objeto ShareOperation contiene un objeto DataPackageView. En esencia, este objeto es una versión de solo lectura del objeto DataPackage que la aplicación de origen usó para crear los datos. Usa este objeto para ver si el contenido que se va a compartir está disponible en formato HTML.


if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
    // Code to get HTML goes here.
}


Es recomendable comprobar si DataPackage contiene el formato de datos que te interesa, aunque tu aplicación admita solo un formato. Esto facilita la compatibilidad posterior con otros tipos de datos y formatos de archivo.

Paso 7: Procesa el contenido HTML.

Para obtener el contenido HTML, llama al método getHtmlFormatAsync. Este método devuelve el contenido HTML en la especificación Formato HTML. Puedes usar DataTransfer.HtmlFormatHelper.getStaticFragment para extraer el fragmento de HTML del Formato HTML. El fragmento resultante también se corrige para quitar el contenido dinámico, como las etiquetas de script, con el fin de que sea seguro representarlo en tu aplicación


shareOperation.data.getHtmlFormatAsync().then(function (htmlFormat) {
    var htmlFragment = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);
    // In this example, we only display the HTML. To do this, you need 
    // a <div> element with an id of "output" in your HTML page.

    // In your app, replace this with whatever is appropriate for your scenario.
    document.getElementById("output").innerHTML = htmlFragment;
});

Por supuesto, lo que haces con el contenido HTML depende de tu aplicación.

Paso 8: Resolver las referencias a imágenes locales para el HTML.

La aplicación de origen de contenido compartido podría incluir en el contenido HTML imágenes ubicadas en su contexto de almacenamiento local (por ejemplo, ms-appx, ms-appdata, etc.). En este caso, la aplicación de origen debe haber rellenado el mapa de recursos con las referencias apropiadas para permitir que el destino de contenido compartido tenga acceso a estos recursos.

Para resolver las imágenes locales desde la aplicación de origen, usa la propiedad resourceMap para consultar cada una de las referencias a las imágenes y obtener el valor de RandomAccessStreamReference correspondiente. El ejemplo siguiente crea el identificador uniforme de recursos (URI) del objeto para representar las imágenes en el contenido HTML. En tu aplicación, reemplaza este código con las modificaciones correspondientes a tu escenario.


var images = document.getElementById("output").getElementsByTagName("img");
if (images.length > 0) {
    shareOperation.data.getResourceMapAsync().done(function (resourceMap) {
        if (resourceMap.size > 0) {
            for (var i = 0, len = images.length; i < len; i++) {
                var streamReference = resourceMap[images[i].getAttribute("src")];
                if (streamReference) {
                    // Call a helper function to map the image element's src to a 
                    // corresponding blob URL generated from the streamReference.
                    setResourceMapURL(streamReference, images[i]);
                }
            }
        }
    });
}

Paso 9: Llama a reportCompleted.

Una vez que la aplicación termina de compartir el contenido, llama a reportCompleted. Después de llamar a este método, Windows descarta tu aplicación.


shareOperation.reportCompleted();


Observaciones

Consulta el código de la Muestra de una aplicación de destino de contenido compartido para ver la experiencia completa de una aplicación que recibe una imagen como parte de un uso compartido.

Ejemplo completo


var shareOperation = null;

function setResourceMapURL(streamReference, imageElement) {
    if (streamReference) {
        streamReference.openReadAsync().done(function (imageStream) {
            if (imageStream) {
                var url = URL.createObjectURL(imageStream, { oneTimeOnly: true });
                imageElement.src = url;
            }
        }, function (e) {
            imageElement.alt = "Failed to load";
        });
    }
}

function shareReady(args) {
    if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
        shareOperation.data.getHtmlFormatAsync().then(function (htmlFormat) {
            var htmlFragment = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.getStaticFragment(htmlFormat);
            // In this example, we only display the HTML. To do this, you need 
            // a <div> element with an id of "output" in your HTML page.
            // In your app, replace this with whatever is appropriate for your scenario.
            document.getElementById("output").innerHTML = htmlFragment;

            // Now we loop through any images and use the resourceMap to map each
            // image element's src.
            var images = document.getElementById("output").getElementsByTagName("img");

            if (images.length > 0) {
                shareOperation.data.getResourceMapAsync().done(function (resourceMap) {
                    if (resourceMap.size > 0) {
                        for (var i = 0, len = images.length; i < len; i++) {
                            var streamReference = resourceMap[images[i].getAttribute("src")];
                                if (streamReference) {
                                    // Call a helper function to map the image element's
                                    // src to a corresponding blob URL generated from the
                                    // streamReference.
                                    setResourceMapURL(streamReference, images[i]);
                                }
                        }
                    }
                });
            }
        });
    } 
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        // The application has been launched.
        args.setPromise(WinJS.UI.processAll());
    } else if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {
        // This application has been activated for the Share contract
        args.setPromise(WinJS.UI.processAll());

        // We receive the ShareOperation object as part of the eventArgs.
        shareOperation = args.detail.shareOperation;

        // We queue an asychronous event so that working with the ShareOperation 
        // object does not block or delay the return of the activation handler.
        WinJS.Application.addEventListener("shareready", shareReady, false);
        WinJS.Application.queueEvent({ type: "shareready" });
    }
};

Temas relacionados

Muestra de una aplicación de destino de contenido compartido
Uso compartido e intercambio de datos
Cómo recibir archivos
Cómo recibir una imagen
Cómo recibir un vínculo
Cómo recibir texto
Inicio rápido: recepción de contenido compartido
DataPackage
Windows.ApplicationModel.DataTransfer
Windows.ApplicationModel.DataTransfer.Share
Directrices para depurar aplicaciones de destino

 

 

Mostrar:
© 2018 Microsoft