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

by 1 contributor:

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="http://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="http://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("http://example.mozilla.org/PurchaseOrderML", "lineItem");
  var firstPrice = lineItems[0].getElementsByTagNameNS("http://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");

<script>タグ以外の方法として<object>タグを用いる例です.このデモではpurchase_order.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("http://example.mozilla.org/PurchaseOrderML", "lineItem");
  var firstPrice = lineItems[0].getElementsByTagNameNS("http://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>

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

Contributors to this page: acid
最終更新者: acid,