Using XML Data Islands in Mozilla

  • Revision slug: Using_XML_Data_Islands_in_Mozilla
  • Revision title: Using XML Data Islands in Mozilla
  • Revision id: 301717
  • Created:
  • Creator: enderandpeter
  • Is current revision? No
  • Comment Removed unncessary repetition of the word "in"

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.

JavaScript can use the content of a {{ HTMLElement("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 {{ 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&nbsp;Data Islands" feature that allows Web authors include XML data inline in HTML&nbsp;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>JavaScript can use the content of a {{ HTMLElement("script") }} element as a data block if the <code>src</code> attribute is omitted and the <code>type</code> 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 "&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, Opera, WebKit-based browsers such as Chrome and Safari, and 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, Opera, WebKit-based browsers such as Chrome and Safari, and 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