Как предоставить общий доступ к HTML (HTML)

Статья
12/12/2015

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Общий доступ к HTML-содержимому отличается от доступа к другим простым форматам, таким как текст или ссылка. Основная трудность заключается в том, что содержимое, выбранное пользователем, может содержать ссылки на другие элементы. Приложениям, которые поддерживают общий доступ к HTML-файлам, требуется обработка таких ссылок, чтобы пользователи смогли организовать общий доступ к желаемому содержимому.

Пример, демонстрирующий сложности общего доступа к HTML-файлу, — содержимое, включающее текст и изображение. Когда пользователи выбирают такое содержимое и касаются чудо-кнопки "Поделиться", они хотят отправить и текст, и изображение. Однако HTML-файл не содержит изображения, он содержит тег img, который указывает на расположение изображения. Если ссылка на изображение недоступна для получающего приложения, как, например, изображение из локального хранилища, необходимо установить карту ресурсов.

Чтобы вы смогли обеспечить общий доступ к HTML-файлу как требуется пользователям, пространство имен Windows.ApplicationModel.DataTransfer включает функции, которые помогут отследить элементы по ссылкам, например изображения. Вот как это сделать.

Что необходимо знать

Технологии

Windows.ApplicationModel.DataTransfer

Необходимые условия

Вам должна быть знакома среда Visual Studio и связанные с ней шаблоны.
Вам необходимо знать JavaScript.
Вы должны уметь использовать JavaScript для определения выбранного пользователем HTML-файла, а также для нахождения экземпляров дочерних элементов в выбранном HTML-файле, например тегов "img".

Инструкции

Этап 1: Настройка приложения в качестве источника данных

Объект DataTransferManager — это основная начальная точка любой операции предоставления общего доступа. Добавьте обработчик событий DataRequested, который будет запускаться, когда пользователь хочет вызвать функцию общего доступа. В приложении Магазина Windows это выполняется автоматически, когда пользователь нажимает чудо-кнопку "Поделиться". При разработке для Windows Phone нет встроенной чудо-кнопки "Поделиться", поэтому вам понадобится добавить элемент управления, которого пользователь может коснуться, чтобы запустить обработчик.

var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", shareHtmlHandler);

Остальные шаги выполняются для реализации функции shareHtmlHandler.

Этап 2: Получение объекта DataRequest

Когда происходит событие datarequested, ваше приложение получает объект DataRequest. Этот объект содержит DataPackage, который вы можете использовать для предоставления содержимого, которым желает поделиться пользователь.

var request = e.request;

Этап 3: Настройка свойств заголовка и описания

request.data.properties.title = "Share Html Example";
request.data.properties.description =
    "Demonstrates how to share an HTML fragment with a local image.";

Этап 4: Используйте метод createHtmlFormat для форматирования фрагмента.

Функция createHtmlFormat добавляет в HTML-файл заголовки и другую необходимую системе информацию для обеспечения общего доступа к содержимому.

var localImage = "ms-appx:///images/logo.png";
var htmlExample = "<p>Here is a local image: <img src=\"" + localImage + "\">.</p>";
var htmlFormat = 
    Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlExample);

Этап 5: Добавление HTML-кода в экземпляр DataPackage

Чтобы добавить HTML, используйте функцию setHtmlFormat.

request.data.setHtmlFormat(htmlFormat);

Этап 6: Создание класса RandomAccessStreamReference для локального изображения

var streamRef = 
    Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(new Windows.Foundation.Uri(localImage));

Этап 7: Добавление класса RandomAccessStreamReference в карту ресурсов

Чтобы добавить файл изображения, используйте свойство resourceMap.

request.data.resourceMap[localImage] = streamRef;

Если фрагмент HTML для общего доступа содержит несколько локальных изображений, необходимо повторить это действие для каждого локального изображения.

Полный пример

Ниже приведен пример функции, которая задает HTML-файл для общего доступа. Для получения более полных сведений см. образец из коллекции кода.

function shareHtmlHandler(e) {
    var localImage = "ms-appx:///images/logo.png";
    var htmlExample = "<p>Here is a local image: <img src=\"" + localImage + "\">.</p>";
    var request = e.request;
    request.data.properties.title = "Share Html Example";
    request.data.properties.description = "Demonstrates how to share an HTML fragment with a local image.";
    var htmlFormat = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(htmlExample);
    request.data.setHtmlFormat(htmlFormat);
    var streamRef = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(new Windows.Foundation.Uri(localImage));
    request.data.resourceMap[localImage] = streamRef;
}

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // This app is newly launched; register the app as a share source.
            var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
            dataTransferManager.addEventListener("datarequested", shareHtmlHandler);
        } else {
            // TODO: This app was reactivated from suspension.
            // Restore the app state here.
        }
        args.setPromise(WinJS.UI.processAll());
    }
};