So wird’s gemacht: Empfangen von HTML (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

HTML-Inhalt kann aus einer Vielzahl von Inhalten bestehen, z. B. Text, Bildern und anderen Informationen. Hier erfahren Sie, wie Ihre App HTML-Inhalt empfangen kann, den ein Benutzer freigeben möchte.

Wenn Sie Ihrer App diese Funktionalität hinzufügen, sollten Sie den Inhalt vielleicht auch in einem Textformat akzeptieren. Text kann unkompliziert in HTML konvertiert werden. Deshalb können Sie sicherstellen, dass die App häufiger für die Benutzer verfügbar ist, indem Sie die Unterstützung für dieses Format hinzufügen. Weitere Informationen erhalten Sie in So wird's gemacht: Empfangen von Text.

Wissenswertes

Technologien

Voraussetzungen

Sie sollten mit Visual Studio und den zugehörigen Vorlagen vertraut sein.
Sie sollten mit JavaScript vertraut sein.

Anweisungen

Schritt 1: Unterstützen Sie den Freigabe-Vertrag.

Damit eine App geteilte Inhalte empfangen kann, müssen Sie die Unterstützung des Freigabe-Vertrags deklarieren. Dieser Vertrag informiert das System darüber, dass die App für den Empfang von Inhalten verfügbar ist. Wenn Sie die App mithilfe einer Microsoft Visual Studio-Vorlage erstellen, gehen Sie wie folgt vor, um den Freigabe-Vertrag zu unterstützen:

Öffnen Sie die Manifestdatei. Ihr Name lautet in etwa package.appxmanifest.
Öffnen Sie die Registerkarte Deklarationen.
Wählen Sie in der Liste Verfügbare Deklarationen die Option Zielfreigabe aus.

Schritt 2: Angeben, dass die App HTML unterstützt

So geben Sie an, dass HTML als Datenformat unterstützt wird:

Öffnen Sie die Manifestdatei.
Klicken Sie im Abschnitt Datenformate auf Neu hinzufügen.
Geben Sie html ein.

Hinweis Sie können einen anderen Einstiegspunkt angeben, wenn die App für den Zielfreigabe-Vertrag aktiviert ist. Ändern Sie dazu im Paketmanifest unter der Deklaration Zielfreigabe im Einstellungsabschnitt App den Seiteneintrag Start. Wir raten dringend dazu, außerdem eine gesonderte JavaScript-Datei zu verwenden, die die Aktivierung für diese Seite behandelt. Sehen Sie sich dazu das Beispiel zur Ziel-App für die Inhaltsfreigabe an.

Schritt 3: Hinzufügen eines Ereignishandlers zum Erkennen der App-Aktivierung

Wenn ein Benutzer Ihre App zum Freigeben von Inhalten verwendet, aktiviert das System die App. Da die Aktivierung auf viele unterschiedliche Arten erfolgen kann, müssen Sie dem activated-Ereignishandler Code hinzufügen, der den Grund für die Aktivierung ermittelt. Überprüfen Sie dazu den Wert der kind-Eigenschaft.

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

Wenn Sie eine dedizierte Startseite für den Zielfreigabe-Vertrag sehen, können Sie die Überprüfung der kind-Eigenschaft überspringen.

Schritt 4: Abrufen des ShareOperation-Objekts

Das ShareOperation-Objekt enthält alle Daten, die die App zum Abrufen der Inhalte benötigt, die der Benutzer freigeben möchte.

shareOperation = args.detail.shareOperation;

Schritt 5: Kehren Sie vom aktivierten Ereignishandler schnell zurück.

Der activated-Ereignishandler muss schnell zurückgegeben werden. Fügen Sie ein asynchrones Ereignis für den activated-Ereignishandler in die Warteschlange ein, damit die Freigabedaten nach Rückgabe des aktivierten Ereignisses verarbeitet werden.

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

Die verbleibenden Schritte implementieren die shareReady-Funktion.

Schritt 6: Überprüfen, ob "DataPackageView" HTML enthält

Das ShareOperation-Objekt enthält ein DataPackageView-Objekt. Dieses Objekt ist im Grunde eine schreibgeschützte Version des DataPackage-Objekts, das von der Quell-App zum Erstellen der Daten verwendet wurde. Stellen Sie mit diesem Objekt fest, ob der freigegebene Inhalt im HTML-Format verfügbar ist.

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

Wir empfehlen zu überprüfen, ob das DataPackage das Datenformat enthält, das Sie interessiert, selbst wenn Ihre App nur ein Format unterstützt. Dies erleichtert Ihnen die Arbeit, falls später andere Datenformattypen und Dateitypen unterstützt werden sollen.

Schritt 7: Verarbeiten des HTML

Rufen Sie zum Abrufen des HTML-Inhalts die getHtmlFormatAsync-Methode auf. Diese Methode gibt HTML-Inhalte in der HTML-Formatspezifikation aus. Sie können DataTransfer.HtmlFormatHelper.getStaticFragment dazu verwenden, das HTML-Fragment aus dem HTML-Format zu extrahieren. Das daraus hervorgehende Fragment ist darüber hinaus bereinigt, sodass keine dynamischen Inhalte wie etwa Skripttags mehr enthalten sind und es Ihre Anwendung sicher rendern kann.

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

Was Sie mit dem HTML machen, hängt natürlich von der App ab.

Schritt 8: Lösen Sie alle lokalen Bildverweise für den HTML-Code auf.

Die Freigabequell-App enthält möglicherweise Verweise auf Bilder im HTML-Code, die sich in ihrem lokalen Speicherkontext befinden (beispielsweise "ms-appx", "ms-appdata" usw.). In diesem Fall sollte die Quell-App die relevanten Verweise in die Ressourcenzuordnung eingefügt haben, um dem Freigabeziel den Zugriff auf diese Ressourcen zu ermöglichen.

Verwenden Sie die resourceMap-Eigenschaft, um die einzelnen Bildverweise zu überprüfen, die passende RandomAccessStreamReference zu finden und so lokale Bilder in der Quell-App aufzulösen. Das folgende Beispiel generiert den Objekt-URI (Uniform Resource Identifier), um die Bilder im HTML zu rendern. Ändern Sie den Code für Ihre App passend zu dem für Sie relevanten Szenario ab.

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

Schritt 9: Aufrufen von "reportCompleted"

Rufen Sie reportCompleted auf, nachdem die App die Freigabe der Inhalte abgeschlossen hat. Nachdem Sie diese Methode aufgerufen haben, schließt das System Ihre App.

shareOperation.reportCompleted();

Anmerkungen

Sehen Sie sich unser Beispiel zur Ziel-App für die Inhaltsfreigabe-Codebeispiel an. Dort finden Sie den gesamten Ablauf dafür vor, wenn eine App ein Bild im Zuge einer Freigabe erhält.

Vollständiges Beispiel

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