将 XML 添加到 XHTML 应用程序并从 XHTML 应用程序中检索 XML
使用 XHTML 时,应该避免使用 document.write
和 innerHTML
等方法,因为它们将 XML 视为文本并且不能正确地序列化代码; HTML 中的 id
属性基本上被转储到 DOM 中,并且 id
属性没有被序列化,这意味着当尝试使用诸如 document.getElementById('example')
之类的东西引用它时,浏览器将不会看到id。以下示例从 XHTML 应用程序获取获取XHTML 代码并将其设置 到 XHTML 应用程序。
将 XHTML 添加到** DOM 并从 DOM 中检索 XML**
<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
// Client header isset` and explicitly declares XHTML parser support.
header('Content-Type: application/xhtml+xml; charset=UTF-8');
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
echo '<!DOCTYPE html>'."\n";
echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
//Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
echo '<!DOCTYPE html>'."\n";
echo '<html>'."\n";
}
?>
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
</style>
<script type="application/javascript">
//<![CDATA[
function xml_get(target)
{
return new XMLSerializer().serializeToString(target)
}
function xml_set(xml,position,target)
{
if (typeof target=='string' && document.getElementById(target)) {target = document.getElementById(target);}
if (!target) {alert('Error: target element was not found in the DOM.');}
else if (position=='after')
{
if (target.nextSibling && target.nextSibling!='[object Text]') {target.insertBefore(xml.getElementsByTagName('*')[0],target.nextSibling);}
else {target.parentNode.appendChild(xml.getElementsByTagName('*')[0]);}
}
else if (position=='before') {target.parentNode.insertBefore(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
else if (position=='inside') {target.appendChild(document.importNode(xml.getElementsByTagName('*')[0],true));}
else if (position=='replace') {target.parentNode.replaceChild(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
else {alert('Error: unknown position to import data to: '+position+'.');}
}
window.onload = function(event)
{
var xml_after = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>after</em> the h1[0] element!</p>','application/xml');
var xml_before = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>before</em> the h1[0] element!</p>','application/xml');
var xml_inside = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>inside</em> inside the element with the id <code>example</code>!</p>','application/xml');
var xml_replace = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>replace</em> example!</p>','application/xml');
xml_set(xml_after,'after',document.getElementsByTagName('h1')[0]);
xml_set(xml_before,'before',document.getElementsByTagName('h1')[0]);
xml_set(xml_inside,'inside','example');
xml_set(xml_replace,'replace','example_replace');
alert(xml_get(document));
}
//]]>
</script>
</head>
<body>
<h1><span>XHTML and JavaScript Simple Demonstration</span></h1>
<div id="example"></div>
<div id="example_replace"></div>
</body>
</html>