Using XML Data Islands in Mozilla

Our volunteers haven't translated this article into Português (Europeu) yet. Join us and help get the job done!

Internet Explorer had an "XML Data Islands" feature that allows Web authors include XML data inline in HTML documents using the <xml> tag. This feature is not based on multi-vendor Web standards and is not supported in Firefox (or other non-IE browsers). XML data islands are no longer supported from Internet Explorer 10 onwards.

HTML5 has a more general feature called "data blocks" that can carry almost any textual data, including XML.

JavaScript can use the content of a <script> element as a data block if the src attribute is omitted and the type attribute does not specify an executable script type. When putting XML in a data block, you need to make sure that the XML content you are embedding does not have an end tag that case-insensitively matches "</script>".

For example, a simple XML purchase order can be embedded like this:

<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>

The XML source text can then be retrieved like this:

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

The XML source text can be parsed into a DOM tree using the DOMParser API:

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

The HTML5 data block-based way shown here works in Firefox, Opera, WebKit-based browsers such as Chrome and Safari, and IE9 while IE's XML data islands work only in IE.

Here is a complete demo (also available as an attachment):

<!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>

The XML source text can be parsed into a DOM tree using the DOMParser API:

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

The HTML5 data block-based way shown here works in Firefox, Opera, WebKit-based browsers such as Chrome and Safari, and IE9 while IE's XML data islands work only in IE.

Here is another possible way, using the <object> tag. For this demo, you must create an external document called 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>

Document Tags and Contributors

Tags:
Last updated by: robocat,