Как отобразить XML в JavaScript?

Question

Как говорится в вопросе, мне просто ускользнуло от того, как отображать xml в javascript, я хочу отобразить некоторый исходный xml внутри div на странице, который находится рядом с обработанным результатом xml в другом div.

Не могу вспомнить, был ли эквивалент побега javascript для преобразования сущностей на клиенте

Примечание : xml-файлы доставляются с сервера как есть, поэтому мне нужно решение на стороне клиента

Примечание : основная проблема в том, что XML не отображается правильно в большинстве браузеров, все скобки и атрибуты исчезают, оставляя вас с текстом, который не похож на xml

Answer 1

Получите ваш XML с помощью Ajax и просто поместите результат в textarea. Стилизуйте текстовую область так, как вы хотите.

Answer 2

Вот функция для вас:

<script type="text/javascript">
<!--
    function xml_to_string(xml_node)
    {
        if (xml_node.xml)
            return xml_node.xml;
        else if (XMLSerializer)
        {
            var xml_serializer = new XMLSerializer();
            return xml_serializer.serializeToString(xml_node);
        }
        else
        {
            alert("ERROR: Extremely old browser");
            return "";
        }
    }

    // display in alert box
    alert(xml_to_string(my_xml));

    // display in an XHTML element
    document.getElementById("my-element").innerHTML = xml_to_string(my_xml);
-->
</script>

Answer 3

Если вы хотите, чтобы браузер отображал ваш XML как XML, он должен быть в своем собственном документе, например iframe или frame. DIV не справится с работой!

Кроме того, в заголовке HTTP запроса, который обслуживает iframe, необходимо отправить Content-Type: text/xml, чтобы браузер мог понять, что это содержимое XML.

Но, если вам действительно нужно увидеть его в DIV, вам нужно будет создать себе XML функцию рендеринга XML2HTML. Для этого вы можете использовать тег HTML PRE, если ваша строка XML уже отформатирована (разрывы строк и табуляции). В этом случае вам придется заменить < на > в строке XML.

Вывод: The browser не может отобразить XML и HTML в одном документе. Если вам это нужно, вам просто нужно обойти это.

Answer 4

Когда вы не хотите использовать весь JavaScript-фреймворк только для этого ...

function insertLiteral(literalString, targetElement)
{
    var textNode = document.createTextNode(literalString);
    targetElement.appendChild(textNode)
    return textNode;
}

// test it (for the example, I assume #targetDiv is there but empty)
var xmlString = "<this><is_some><xml with='attributes' /></is_some></this>";
var targetElement = document.getElementById("targetDiv");
var xmlTextNode = insertLiteral(xmlString, targetElement);

#targetDiv может быть оформлено с использованием CSS:

#targetDiv {
  font-family: fixed;
  white-space: pre;
}

Answer 5

Проблема в том, что вам нужно экранировать символы, которые анализатор HTML будет интерпретировать как разметку: <,>, &, а в некоторых случаях "и '

Базовый JavaScript не предоставляет этого для вас, но многие из дополнительных библиотек делают.

Например, Prototype имеет: http://www.prototypejs.org/api/string/escapeHTML

Answer 6

Это самый простой способ показать XML в виде текста на той же странице для копирования и вставки:

var xml = document.getElementById('svg_element').innerHTML;
document.getElementById('svg_pre').innerText = xml; 

Answer 7

Один из методов заключается в использовании двух элементов iframe с атрибутом src, установленным на соответствующий XML-файл, доступный с сервера (при условии, что он доступен через виртуальный каталог):

<iframe src="/myapp/Document1.xml"><iframe src="/myapp/Document2.xml">

В качестве альтернативы, вы можете использовать запрос типа AJAX для извлечения документов XML и затем динамически встраивать их в документ HTML, используя что-то вроде:

getElementById("myDiv").innerText = ajax.response;