Как получить HTML (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]
HTML-содержимое может иметь несколько составляющих, включая текст, картинки и другую информацию. Здесь описывается получение приложением HTML-содержимого, которое пользователь хочет совместно использовать.
Добавляя эту функцию к приложению, также учитывайте получение содержимого в текстовом формате. Текст легко преобразовать в HTML, поэтому, добавив поддержку этого формата, вы расширите доступность вашего приложения для пользователей. Подробнее см. в разделе Получение текста.
Что необходимо знать
Технологии
Необходимые условия
- Вы должны уметь работать с программой Visual Studio и связанными с ней шаблонами.
- Вы должны знать JavaScript.
Инструкции
Этап 1: Поддержка контракта отправки данных.
Чтобы ваше приложение могло получать общее содержимое, вам нужно объявить, что оно поддерживает контракт отправки данных. Этот контракт, по сути, позволяет системе узнать о доступности вашего приложения для получения содержимого. Если для создания приложения вы используете шаблон Microsoft Visual Studio, вот как обеспечить поддержку контракта отправки данных:
- Откройте файл манифеста. Он должен называться примерно так: package.appxmanifest.
- Откройте вкладку Объявления.
- Выберите Конечное приложение в списке Доступные объявления.
Этап 2: Указать поддержку HTML.
Чтобы указать, что приложение поддерживает формат HTML, выполните следующие действия:
- Откройте файл манифеста.
- В разделе Форматы данных щелкните Добавить.
- Введите html.
Примечание Вы можете указать другую точку входа, когда ваше приложение активируется для контракта получателя данных. Для этого измените запись на Начальной странице в разделе параметров Приложения в разделе объявления Получатель данных в манифесте пакета. Мы настоятельно рекомендуем использовать отдельный файл JavaScript, который управляет активацией этой страницы. Например, просмотрите образец Общий доступ к содержимому приложения-получателя данных.
Этап 3: Добавить обработчик событий, определяющий активацию приложения.
Когда пользователь выбирает ваше приложение для совместного доступа к содержимому, система активирует приложение. Так как это может осуществляться разными способами, вам нужно добавить в обработчик событий activated код, определяющий причину активации. Для этого проверьте значение свойства 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) {
...
}
};
Если вы используете отдельную начальную страницу для контракта получателя данных, вы можете пропустить проверку свойства kind.
Этап 4: Получить объект "ShareOperation"
Объект ShareOperation содержит все данные, необходимые вашему приложению, чтобы получить общее содержимое.
shareOperation = args.detail.shareOperation;
Этап 5: Быстро завершите обработчик активированного события.
Обработчик событий activated должен быстро возвращаться. Поставьте в очередь асинхронное событие из обработчика событий activated, чтобы обработка общих данных происходила после возврата активированного события.
WinJS.Application.addEventListener("shareready", shareReady, false);
WinJS.Application.queueEvent({ type: "shareready" });
Остальные шаги выполняются для реализации функции shareReady.
Этап 6: Проверка наличия HTML в DataPackageView
Объект ShareOperation содержит объект DataPackageView. По существу, этот объект является нередактируемой версией объекта DataPackage, который используется исходным приложением для создания данных. Используйте этот объект, чтобы определить, доступен ли формат HTML для совместного использования.
if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.html)) {
// Code to get HTML goes here.
}
Рекомендуем проверить, содержит ли DataPackage формат данных, в котором вы заинтересованы, даже если ваше приложение поддерживает только один формат. Это упростит поддержку других типов данных и форматов файлов, которые могут понадобиться в дальнейшем.
Этап 7: Обработать HTML-код.
Чтобы получить содержимое HTML, вызовите метод getHtmlFormatAsync. Этот метод возвращает содержимое HTML в спецификации формата HTML. С помощью DataTransfer.HtmlFormatHelper.getStaticFragment можно извлечь фрагмент HTML из формата HTML. Получившийся фрагмент проходит проверку с удалением динамического содержимого (теги script), и его можно безопасно запускать в приложении
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;
});
Действия, выполняемые с HTML, зависят от вашего приложения.
Этап 8: Разрешите ссылки на локальные изображения для HTML.
Приложение-источник данных может включать в HTML-код изображения, которые хранятся в локальном контексте (например, ms-appx, ms-appdata и т. д.). В этом случае приложение-источник данных должно заполнить карту ресурсов соответствующими ссылками, чтобы разрешить доступ к таким ресурсам из приложения-получателя данных.
Для разрешения локальных изображений в приложении-источнике используйте свойство resourceMap для поиска ссылки на каждое изображение и получения соответствующей RandomAccessStreamReference. В следующем примере создается универсальный код ресурса (URI) объекта для отображения изображений в HTML. Замените в своем приложении этот код, внеся изменения, соответствующие сценарию приложения.
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]);
}
}
}
});
}
Этап 9: Вызвать "reportCompleted".
После того как ваше приложение успешно завершит предоставление общего доступа к содержимому, вызовите reportCompleted. После того как вы вызовете этот метод, система закроет ваше приложение.
shareOperation.reportCompleted();
Замечания
Посмотрите образец кода Общий доступ к содержимому приложения-получателя данных, чтобы ознакомиться с полным сценарием работы приложения, получающего изображение по механизму общего доступа.
Полный пример
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" });
}
};
Связанные разделы
Пример конечного приложения при общем доступе к содержимому
Общий доступ к данным и обмен данными
Краткое руководство. Получение общего содержимого
Windows.ApplicationModel.DataTransfer