Подгрузка и чтение локального XML при помощи JS

406
20 декабря 2016, 21:38

В настоящий момент, из-за политики хромиума, нельзя подгружать локальные файлы через ajax без аргумента «--allow-file-access-from-files». Но мне в текущий момент требуется создать веб-приложение, где базой данных является xml-файл (в крайнем случае json), находящийся рядом с index.html. Подразумевается, что пользователь может запустить это приложение локально. Есть ли обходные пути для кроссбраузерного (ie11+) чтения xml-(json-) файла, без оборачивания его в функцию и переименования в формат js?

Answer 1

Итак, после старательного гуглежа, я решил проблему следующим образом:

  • В IE использовал ActiveXObject для чтения файла и получения xml из него.
  • В остальных браузерах создал html-объект <object data="file.xml">, в dom которого подгружается указанный в аргументах XML.

З.Ы. в функции используется Promise — это ES 6, соответственно в эксплорере не работает, я использую Babel

Использование функции:

loadXMLFile('./file.xml').then(function(xml) {
    // Тут что-то делаем с xml 
    // Он будет тут представлен в виде текстового xml, а не dom'а
});

Тело функции:

// Получение контента из файла -------------------------------------------------
function loadXMLFile(filename) {
    return new Promise(function(resolve, reject) {
        // Если мы имеем дело с IE, то работает с ActiveX-контентом
        if('ActiveXObject' in window) {
            // Получение xml-текста из файла для осла
            var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
            xmlDoc.async = false;
            xmlDoc.load(filename);
            resolve(xmlDoc.xml);

        // Если мы работаем с нормальными браузерами,
        // то создаём html-элемент <object> с xml
        } else {
            // Создаём элемент
            var obj = createObject(filename);
            if(obj == null) {
                reject(['Object is not created']);
                return;
            }
            obj.onload = function() {
                if(this.contentDocument == null) {
                    // Объект с html-курсом не найден
                    reject(['XML-file is not found'])
                    return;
                }
                var tmp = document.createElement('div');
                tmp.appendChild(this.contentDocument.children[0]);
                resolve(tmp.innerHTML);
            }
        }
    });
}
// Функция создания объекта с xml для нормальных браузеров ---------------------
function createObject(filename) {
    // Вариант для остальных браузеров
    var obj = document.createElement('object');
    var attrs = {
        id:     'xmlfile',
        data:   filename,
        type:   'text/xml',
        width:  '1px',
        height: '1px'
    }
    for (var i in attrs) {
        obj.setAttribute(i, attrs[i]);
    }
    var param = document.createElement('param');
    param.setAttribute('name', 'src');
    param.setAttribute('value', filename);
    obj.appendChild(param);
    document.body.appendChild(obj);
    return obj;
}
READ ALSO
Почему в PyCharm прекращается отладка npm?

Почему в PyCharm прекращается отладка npm?

После старта отладки проекта - отладка завершается через некоторое время (~30 секунд) с сообщением "ошибка подключения"

547
Как на мобильном браузере (safari) закрыть бесконечно всплывающее окно (alert)?

Как на мобильном браузере (safari) закрыть бесконечно всплывающее окно (alert)?

police-oplataru уведомление от мвд вы заблокированы за неоднократное посещение

321
Webpack. Сборка отдельных css и скриптов в общие файлы

Webpack. Сборка отдельных css и скриптов в общие файлы

Как собрать разрозненные в проекте стили/скрипты в один файл (bundlejs/bundle

550
Некорректно работает Яндекс.Карта

Некорректно работает Яндекс.Карта

На странице в футере есть кнопка "Показать на карте"При клике во всплывающем окне отображается карта

366