Comment recevoir du contenu HTML (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Le contenu HTML peut se composer de divers types de données, telles que du texte, des images ou d’autres informations. Nous allons voir comment votre application peut recevoir le contenu HTML qu’un utilisateur souhaite partager.

Lorsque vous ajoutez cette fonctionnalité à votre application, prévoyez également une prise en charge du contenu au format texte. Comme le texte peut facilement être converti en contenu HTML, l’ajout d’une prise en charge de ce format contribue à assurer à votre application l’accès au plus grand nombre d’utilisateurs. Pour en savoir plus, voir Comment recevoir du texte.

Ce que vous devez savoir

Technologies

Prérequis

Vous devez être familiarisé avec Visual Studio et ses modèles connexes.
Vous devez être familiarisé avec JavaScript.

Instructions

Étape 1: prendre en charge le contrat de partage

Avant que votre application puisse recevoir un contenu partagé, vous devez déclarer qu’elle prend en charge le contrat de partage. Ce contrat indique au système que votre application est apte à recevoir des contenus. Si vous utilisez un modèle Microsoft Visual Studio pour créer votre application, voici comment prendre en charge le contrat de partage :

Ouvrez le fichier manifeste. Il doit normalement porter un nom similaire à package.appxmanifest.
Ouvrez l’onglet Déclarations.
Choisissez Partage cible dans la liste Déclarations disponibles.

Étape 2: indiquer que votre application prend en charge le contenu HTML

Pour indiquer que vous prenez en charge le contenu HTML :

Ouvrez le fichier manifeste.
Dans la section Formats de données, cliquez sur Ajouter.
Tapez html.

Remarque Vous pouvez spécifier un autre point d’entrée lorsque votre application est activée pour le contrat de partage cible. Pour ce faire, modifiez l’entrée de page Démarrage dans la section des paramètres Application de la déclaration Partage cible du manifeste du package. Nous vous recommandons d’utiliser également un fichier JavaScript distinct qui gère l’activation pour cette page. Par exemple, consultez l’Exemple de partage de contenu cible entre applications.

Étape 3: ajouter un gestionnaire d’événements pour savoir à quel moment votre application est activée

Quand un utilisateur sélectionne votre application pour partager du contenu, le système active votre application. Étant donné que cela peut se produire de différentes façons, vous devez ajouter à votre gestionnaire d’événements activated un code qui détecte la raison de l’activation de l’application. Pour ce faire, vérifiez la valeur de la propriété 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 vous utilisez une page de démarrage dédiée pour le contrat de partage cible, vous pouvez omettre de vérifier la propriété kind

Étape 4: obtenir l’objet ShareOperation

L’objet ShareOperation contient toutes les données dont votre application a besoin pour obtenir le contenu qu’un utilisateur souhaite partager.

shareOperation = args.detail.shareOperation;

Étape 5: retourner rapidement du gestionnaire d’événements activé.

Le gestionnaire d’événements activated doit retourner rapidement. Mettez en file d’attente un événement asynchrone provenant du gestionnaire d’événements activated pour que le traitement des données de partage ait lieu après le retour de l’événement activé.

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

Les étapes restantes servent à implémenter la fonction shareReady.

Étape 6: vérifier si l’objet DataPackageView contient des données au format HTML

L’objet ShareOperation contient un objet DataPackageView. En essence, cet objet est une version en lecture seule de l’objet DataPackage que l’application source a utilisé pour créer les données. Utilisez cet objet pour voir si le contenu partagé est disponible dans un format HTML.

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

Vérifier que le DataPackage contient le format de données qui vous intéresse est une pratique recommandée, même si votre application ne prend en charge qu’un seul format. Cela facilite la prise en charge d’autres types de formats de données et de formats de fichiers ultérieurement.

Étape 7: traiter le contenu HTML

Pour obtenir le contenu HTML, appelez la méthode getHtmlFormatAsync. Cette méthode renvoie le contenu HTML dans le format spécifié. Vous pouvez utiliser DataTransfer.HtmlFormatHelper.getStaticFragment pour extraire le fragment HTML du Format HTML. Le fragment qui en résulte est également expurgé de tout contenu dynamique comme des balises de script, et peut être intégré à votre application en toute sécurité.

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;
});

Bien entendu, les opérations appliquées au contenu HTML dépendent de votre application.

Étape 8: Résolvez toute référence à des images locales pour le contenu HTML.

L’application source du partage peut inclure dans son code HTML des images qui sont situées dans son contexte de stockage local (par exemple, ms-appx, ms-appdata, etc.). Dans ce cas, l’application source doit avoir renseigné la carte des ressources à l’aide de références appropriées afin de permettre à la cible du partage d’accéder à ces ressources.

Pour résoudre les images locales depuis l’application source, utilisez la propriété resourceMap pour analyser chaque référence d’image et obtenir la RandomAccessStreamReference correspondante. L’exemple suivant crée l’objet Uniform Resource Identifier (URI) pour rendre la ou les images dans l’HTML. Dans votre application, remplacez ce code par toute modification appropriée pour votre scénario.

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]);
                }
            }
        }
    });
}

Étape 9: appeler reportCompleted

Lorsque votre application a terminé de partager le contenu, appelez la méthode reportCompleted. Quand vous avez appelé cette méthode, le système masque votre application.

shareOperation.reportCompleted();

Remarques

Consultez notre exemple de code Exemple de partage de contenu cible entre applications pour observer l’intégralité de l’expérience d’une application recevant une image dans un contexte de partage.

Terminer l’exemple

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" });
    }
};