Отобразить XML
Нужно на одной странице отобразить несколько xml в виде структуры как она есть, т.е. с тегами, открывающимися по клику.
Наподобие того как браузер отображает xml-файл. Пробовал открывать xml-файлы в iframe, но нормально отображает только firefox. Нужен какой-то способ указать браузеру что во фрейме именно xml, или же отыскать библиотеку, представляющие данные нужным образом, т.е. с подсветкой тегов и фолдингом |
Пишут что все должно работать по встроенным стилям.
Цитата:
|
Ну так оно и работает, если просто открыть 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> |
Цитата:
|
Еще пишут и я тоже согласен, ибо как-то делал сайт целиком на XML-XSL http://stackoverflow.com/questions/9...ic-xml-as-html
|
да, мысли про XSLT были, но я его совсем не знаю и хотелось бы избегнуть.
И как я понимаю это серверная технология. Серверных скриптов я тоже стараюсь избегать. Только статика для простоты и переносимости. |
| Часовой пояс GMT +3, время: 14:52. |