XML в html div?

Question

Я поместил несколько xml-фрагментов в div и получил его с помощью getElementsByTagName. Он отлично работает в Firefox, но Internet Explorer не так хорош ... Что я должен сделать, чтобы это исправить?

 var thumbnails = content.getElementsByTagName("thumbnails");
  for (var i = 0; i < thumbnails.length; i++) {
       thumbnails[i].innerHTML

Answer 1

В общем, вы не можете поместить произвольный XML в документ HTML. Это недопустимый HTML, и парсеры браузера могут попытаться «исправить» поврежденный HTML, исказив ваши данные.

Вы можете встроить XML в HTML, используя <xml> острова данных в IE, или используя native-XHTML с пользовательскими пространствами имен в других браузерах. Но, кроме проблемы совместимости двух разных методов, это не очень хорошая идея.

Кроме того, даже если это работает, обычные узлы XML Element не имеют свойства innerHTML в любом случае.

Вы можете встроить XML в JavaScript:

<script type="text/javascript">
    var xml= '<nails><thumb id="foo">bar</thumb><thumb id="bof">zot</thumb></nails>';
    var doc= parseXML(xml);
    var nails= doc.getElementsByTagName('thumb');
    for (var i = 0; i<nails.length; i++) {
        alert(nails[i].getAttribute('id'));
    }

    function parseXML(s) {
        if ('DOMParser' in window) {
            return new DOMParser().parseFromString(s, 'text/xml');
        } else if ('ActiveXObject' in window) {
            var doc= new ActiveXObject('MSXML2.DOMDocument');
            doc.async= false;
            doc.loadXML(s);
            return doc;
        } else {
            alert('Browser cannot parse XML');
        }
    }
</script>

Но это означает, что вы должны кодировать XML как строковый литерал JavaScript (например, используя кодер JSON, если вы делаете это динамически). В качестве альтернативы вы можете использовать XMLHttpRequest для извлечения отдельного XML-документа с сервера: это более широко поддерживается, чем подход DOMParser / ActiveX.

Если вы просто используете XML для передачи данных в свой сценарий, вы найдете много более простых в написании литералов JavaScript для этого, вместо того, чтобы разбираться с анализом XML.

<script type="text/javascript">
    var nails= [
        {"id": "foo", "text": "bar"},
        {"id": "bof", "text": "zot"}
    ];
    for (var i = 0; i<nails.length; i++) {
        // do something
    }
</script>

Опять же, вы можете легко создать такую ​​структуру данных, используя JSON-кодировщик, если вам нужно сделать это динамически.

Answer 2

IE 7 имеет проблему безопасности со свойством innerHTML элемента DOM. Эта проверка безопасности молча блокирует некоторый код. Похоже, это может быть вашей проблемой. Я не знаю, если это проблема с IE 8.

Исправление: просто добавьте динамически созданный элемент в дерево DOM перед доступом к любому из свойств, а не после.

Тем не менее, для наилучшей практики целесообразно изменить способ, которым вы это делаете. Возможно, вам следует отредактировать свой вопрос, чтобы задать лучший способ сделать это.

Answer 3

То, что я нашел лучшим способом сделать это, это поместить ваш xml в текстовую область. Это тоже предложение ext-js. Таким образом, браузер не пытается создать HTML из вашего XML. Когда вы получаете его значение, вы просто получаете значение texarea.

Однако, как уже упоминали другие люди, я бы посоветовал вам извлечь xml с сервера для лучшего разделения html и данных, если только вам действительно не нужно свести http-запросы к минимуму.