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: DataPackageView에 HTML이 포함되어 있는지 확인합니다.
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 조각을 추출할 수 있습니다. 또한 결과 조각은 스크립트 태그와 같은 동적 콘텐츠를 제거하여 응용 프로그램에서 안전하게 렌더링할 수 있도록 정화됩니다.
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에 대한 로컬 이미지 참조를 확인합니다.
공유 원본 앱은 로컬 저장소 컨텍스트(예: ms-appx, ms-appdata 등)에 있는 HTML에 이미지를 포함할 수 있습니다. 이런 경우 원본 앱은 리소스 맵을 적절한 참조로 채워 공유 대상에서 이러한 리소스에 액세스할 수 있도록 해야 합니다.
원본 앱에서 로컬 이미지를 확인하려면 resourceMap 속성을 사용하여 각 이미지 참조를 조회하고 해당 RandomAccessStreamReference를 가져옵니다. 다음 예에서는 개체 URI(Uniform Resource Identifier)를 만들어 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