Using XML Data Islands in Mozilla

  • Revision slug: Using_XML_Data_Islands_in_Mozilla
  • Revision title: Using XML Data Islands in Mozilla
  • Revision id: 88525
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 6 words added, 4 words removed

Revision Content

Internet Explorer has 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). However, HTML5 has a more general feature called "data blocks" that can carry almost any textual data, including XML.

A {{ HTMLElement("script") }} when it does not have a src attribute and has a type attribute that does not identify an executable script type. The content of the {{ HTMLElement("script") }} element is then a data block that JavaScript can use. 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, in Opera, in WebKit-based browsers such as Chrome and Safari, and in 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, in Opera, in WebKit-based browsers such as Chrome and Safari, and in IE9 while IE's XML data islands work only in IE.

Here is another possible way, using the {{ HTMLElement("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>

Revision Source

<p>Internet Explorer has an "XML Data Islands" feature that allows Web authors include XML data inline in HTML documents using the <code>&lt;xml&gt;</code> tag. This feature is not based on multi-vendor Web standards and is not supported in Firefox (or other non-IE browsers). However, HTML5 has a more general feature called "data blocks" that can carry almost any textual data, including XML.</p>
<p>A {{ HTMLElement("script") }} when it does not have a <code>src</code> attribute and has a <code>type</code> attribute that does not identify an executable script type. The content of the {{ HTMLElement("script") }} element is then a data block that JavaScript can use. 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 "&lt;/script&gt;".</p>
<p>For example, a simple XML purchase order can be embedded like this:</p>
<pre class="brush: xml">&lt;script id="purchase-order" type="application/xml"&gt;
&lt;purchaseOrder xmlns="http://example.mozilla.org/PurchaseOrderML"&gt;
  &lt;lineItem&gt;
    &lt;name&gt;Line Item 1&lt;/name&gt;
    &lt;price&gt;1.25&lt;/price&gt;
  &lt;/lineItem&gt;
  &lt;lineItem&gt;
    &lt;name&gt;Line Item 2&lt;/name&gt;
    &lt;price&gt;2.48&lt;/price&gt;
  &lt;/lineItem&gt;
&lt;/purchaseOrder&gt;
&lt;/script&gt;
</pre>
<p>The XML source text can then be retrieved like this:</p>
<pre>var orderSource = document.getElementById("purchase-order").textContent;
</pre>
<p>The XML source text can be parsed into a DOM tree using the <a href="/en/DOM/DOMParser" title="en/DOMParser">DOMParser</a> API:</p>
<pre>var parser = new DOMParser();
var doc = parser.parseFromString(orderSource, "application/xml");</pre>
<p>The HTML5 data block-based way shown here works in Firefox, in Opera, in WebKit-based browsers such as Chrome and Safari, and in IE9 while IE's XML data islands work only in IE.</p>
<p>Here is a complete demo (also available as an attachment):</p>
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;XML Data Block Demo&lt;/title&gt;
&lt;script id="purchase-order" type="application/xml"&gt;
&lt;purchaseOrder xmlns="http://example.mozilla.org/PurchaseOrderML"&gt;
  &lt;lineItem&gt;
    &lt;name&gt;Line Item 1&lt;/name&gt;
    &lt;price&gt;1.25&lt;/price&gt;
  &lt;/lineItem&gt;
  &lt;lineItem&gt;
    &lt;name&gt;Line Item 2&lt;/name&gt;
    &lt;price&gt;2.48&lt;/price&gt;
  &lt;/lineItem&gt;
&lt;/purchaseOrder&gt;
&lt;/script&gt;
&lt;script&gt;
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 + ".";
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="runDemo()";&gt;
Demo did not run
&lt;/body&gt;
&lt;/html&gt;
</pre>
<p>The XML source text can be parsed into a DOM tree using the <a href="/en/DOM/DOMParser" title="en/DOMParser">DOMParser</a> API:</p>
<pre>var parser = new DOMParser();
var doc = parser.parseFromString(orderSource, "application/xml");</pre>
<p>The HTML5 data block-based way shown here works in Firefox, in Opera, in WebKit-based browsers such as Chrome and Safari, and in IE9 while IE's XML data islands work only in IE.</p>
<p>Here is another possible way, using the {{ HTMLElement("object") }} tag. For this demo, you must create an external document called <code>purchase_order.xml</code>:</p>
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;XML Data Block Demo&lt;/title&gt;
&lt;script&gt;
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 + ".";
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="runDemo()";&gt;
&lt;object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"&gt;&lt;/object&gt;
&lt;div id="output-box"&gt;Demo did not run&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
Revert to this revision