Using XML Data Islands in Mozilla

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

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

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

Using XML Data Islands in Mozilla

Document Tags and Contributors