Ну так оно и работает, если просто открыть xml-файл.
А мне нужно много их на одной странице, поэтому либо iframe, либо XMLHttpRequest.
и в iframe оказалось всё не так радужно.
Написал собственный "хайлайтер", буду рад критике
выглядит так
xmlviewer.js
// возвращает хтмл обработанной ноды
function extractNode(elem) {
var result = '';
for (var i=0; i< elem.childNodes.length; i++) {
if (elem.childNodes[i].nodeType == 1) { // xml нода
result += '<div class="tgname opener minus"><'+elem.childNodes[i].nodeName+'></div>';
result += '<span class="tgcontent">';
result += extractNode(elem.childNodes[i]);
result += '</span>';
result += '<div class="tgname ender"></'+elem.childNodes[i].tagName+'></div>';
}
// текстовая нода
if (elem.childNodes[i].nodeType == 3) result += '<p class="tgtxt">'+elem.childNodes[i].data+'</p>';
}
return result;
}
// формирует из xml ноду содержащую отображение ноды с подсветкой и фолдингом
function formExtend(xmlcontent) {
var xmlNode = document.createElement('div');
xmlNode.className = 'xmlnode';
xmlNode.innerHTML = xmlcontent;
xmlNode.innerHTML = extractNode(xmlNode);
var spans = xmlNode.getElementsByTagName('SPAN');
for (var i=0;i<spans.length;i++) {
spans[i].previousSibling.onclick = function(event) {
event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation()
} else {
event.cancelBubble = true
}
this.classList.toggle('plus');
this.classList.toggle('minus');
this.nextSibling.style.display = this.nextSibling.style.display ? '' : 'none';
this.nextSibling.nextSibling.style.display = this.nextSibling.nextSibling.style.display ? '' : 'none';
};
}
return xmlNode;
}
xmlviewer.css
.tgname {color:grey; font-size:0.8em}
p {margin:0}
span.tgcontent {display:block; margin-left:0.1em;padding-left:1.3em;border-left:1px dotted #ccc}
div.opener {cursor:pointer}
div.ender{margin-left:1em}
div.opener:hover {color:#dd0000;}
div.opener:hover + span + div {color:#dd0000;}
div.opener:hover + span {background:#f9f9f9}
.plus:before {content:"+ ";font-family:Consolas;font-weight:bold}
.minus:before {content:"- ";font-family:Consolas;font-weight:bold}
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="xmlviewer.css" />
<script type="text/javascript" src="xmlviewer.js"></script>
</head>
<body>
<script type="text/javascript">
testxml="<xml><item1>текст1</item1><item2>текст2<item3>текст3</item3></item2></xml>"
document.body.appendChild(formExtend(testxml));
</script>
</body>
</html>
