mozilla
검색 결과

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

    문서 태그 및 공헌자

    태그: 
    최종 변경: robocat,