如何接收 HTML (HTML)
[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱 最新文件 ]
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 的任何本機影像參考。
分享的來源應用程式可能包含位於本機儲存區內容之 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