Информация об изменениях

Сообщение Re: Рендер xhtml файлов в div от 11.05.2020 17:56

Изменено 11.05.2020 18:24 bnk

Re: Рендер xhtml файлов в div
Здравствуйте, Михaил, Вы писали:

М>Привет

М>Пишу простенькую онлайн читалку для файлов epub на JS.
М>Задача такая:
М>есть набор корректных .xhtml файлов (главы), и нужно их отобразить внутри одной html страницы, друг за другом, чтобы получилась цельная книга, сделать это хочу локально. То есть, хотелось бы чтобы браузер сделал это сам, с помощью JS, не привлекая сервер. По сути требуется во-первых объединить все xhtml в один, а во-вторых как-то отрендерить их в, например, div.
М>Как такое можно сделать?

М>div.innerHtml не работает с xhtml, так как неправильно парсит xhtml элементы.


Может DOMParser? типа так
Promise.all([
  fetch('a.xhtml'),
  fetch('b.xhtml'),
  fetch('c.xhtml')
]).then(response =>
  Promise.all(response.map(r => r.text())))
  .then(results => {
    let html = '';
    let p = new DOMParser();
    for (var i = 0; i < results.length; ++i) {
      let d = p.parseFromString(results[i], 'text/xml');
      html += d.body.innerHTML;
    }
    document.getElementById('output').innerHTML = html;
  })
Re: Рендер xhtml файлов в div
Здравствуйте, Михaил, Вы писали:

М>Привет

М>Пишу простенькую онлайн читалку для файлов epub на JS.
М>Задача такая:
М>есть набор корректных .xhtml файлов (главы), и нужно их отобразить внутри одной html страницы, друг за другом, чтобы получилась цельная книга, сделать это хочу локально. То есть, хотелось бы чтобы браузер сделал это сам, с помощью JS, не привлекая сервер. По сути требуется во-первых объединить все xhtml в один, а во-вторых как-то отрендерить их в, например, div.
М>Как такое можно сделать?

М>div.innerHtml не работает с xhtml, так как неправильно парсит xhtml элементы.


Может DOMParser? типа так
    Promise.all([fetch('a.xhtml'), fetch('b.xhtml'), fetch('c.xhtml')])
      .then(response => Promise.all(response.map(r => r.text())))
        .then(texts => document.getElementById('output').innerHTML = texts.map(r => new DOMParser().parseFromString(r, 'text/xml').body.innerHTML).join())