MozillaでのXML データアイランドの利用

Internet Explorer(IE)は，「XMLデータアイランド」と呼ばれる<xml>タグを用いてHTMLドキュメントに直接XMLデータを埋め込む仕組みを提供しています．この仕組みはマルチベンダーのウェブ標準に準拠しておらず，Firefoxや他の非IEブラウザではサポートされません．しかし，HTML5は「データブロック」と呼ばれる，より一般的な仕組みを提供しており，XMLを含む，ほぼすべてのテキストデータを埋め込むことが可能です．

JavaScriptでは，src属性が省かれ，かつtype属性が実行可能スクリプト型を指定しない場合に限り<script>エレメントの内容をデータブロックとして扱うことができます．この場合埋め込みたいXMLコンテントが"</script>"にマッチする(大文字・小文字無視で)終了タグを持たないことを確かめておく必要があります．

例として, 簡単な発注書はこのように埋め込むことができます:

<script id="purchase-order" type="application/xml">
<purchaseOrder xmlns="https://example.mozilla.org/PurchaseOrderML">
  <lineItem>
    <name>Line Item 1</name>
    <price>1.25</price>
  </lineItem>
  <lineItem>
    <name>Line Item 2</name>
    <price>2.48</price>
  </lineItem>
</purchaseOrder>
</script>

埋め込んだXMLソーステキストはこのように取出せます:

var orderSource = document.getElementById("purchase-order").textContent;

XMLソーステキストはDOMParser APIを用いてDOM treeにパース出来ます:

var parser = new DOMParser();
var doc = parser.parseFromString(orderSource, "application/xml");

ここで示した　HTML5のデータブロック方式は，Firefox， Opera，WebKitベースのChromeとSafariおよびIE9で機能します．それに対し，IEのXMLデータアイランド方式はIEでしか使えません．

完全なデモです (アタッチメントとしても利用可能):

<!DOCTYPE html>
<html>
<head>
<title>XML Data Block Demo</title>
<script id="purchase-order" type="application/xml">
<purchaseOrder xmlns="https://example.mozilla.org/PurchaseOrderML">
  <lineItem>
    <name>Line Item 1</name>
    <price>1.25</price>
  </lineItem>
  <lineItem>
    <name>Line Item 2</name>
    <price>2.48</price>
  </lineItem>
</purchaseOrder>
</script>
<script>
function runDemo() {
  var orderSource = document.getElementById("purchase-order").textContent;
  var parser = new DOMParser();
  var doc = parser.parseFromString(orderSource, "application/xml");
  var lineItems = doc.getElementsByTagNameNS("https://example.mozilla.org/PurchaseOrderML", "lineItem");
  var firstPrice = lineItems[0].getElementsByTagNameNS("https://example.mozilla.org/PurchaseOrderML", "price")[0].textContent;
  document.body.textContent = "The purchase order contains " + lineItems.length + " line items. The price of the first line item is " + firstPrice + ".";
}
</script>
</head>
<body onload="runDemo()";>
Demo did not run
</body>
</html>

XMLソーステキストはDOMParser APIを用いてDOM treeにパース出来ます:

var parser = new DOMParser();
var doc = parser.parseFromString(orderSource, "application/xml");

<!DOCTYPE html>
<html>
<head>
<title>XML Data Block Demo</title>
<script>
function runDemo() {
  var doc = document.getElementById("purchase-order").contentDocument;
  var lineItems = doc.getElementsByTagNameNS("https://example.mozilla.org/PurchaseOrderML", "lineItem");
  var firstPrice = lineItems[0].getElementsByTagNameNS("https://example.mozilla.org/PurchaseOrderML", "price")[0].textContent;
  document.getElementById("output-box").textContent = "The purchase order contains " + lineItems.length + " line items. The price of the first line item is " + firstPrice + ".";
}
</script>
</head>
<body onload="runDemo()";>
<object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"></object>
<div id="output-box">Demo did not run</div>
</body>
</html>

MozillaでのXML データアイランドの利用

ドキュメントのタグと貢献者