Подтвердить что ты не робот

Загрузить HTML-шаблон с помощью JavaScript

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

У меня есть "templates.html", который содержит набор фрагментов HTML, которые я хочу загрузить в JavaScript и использовать. Каков хороший способ доступа к шаблонам/фрагментам с учетом того, что templates.html не является загруженным документом DOM?

Я думал об использовании document.open для создания DOM для доступа, но я думаю, что это имеет проблемы в некоторых браузерах.

Ответ 1

Вы можете загрузить html в скрытый div, а затем у вас будет доступ к DOM самый простой способ загрузки html в DIV - использование загрузки jquery: http://api.jquery.com/load/

Ответ 2

Используйте jQuery и .load() (http://api.jquery.com/load/ ) для ввода загруженного документа в DOM.

$(function() {
    $('#content').load('/templates.html');
});

Ответ 3

Другой способ сделать это - использовать requireJS.

require (['text!template_name'], function(yourTemplate) {
  // do stuff in here with yourTemplate dinamically load
}

Ответ 4

Это немного устарело, но поскольку "Загрузка HTML-шаблона с JavaScript" в настоящее время следует ссылаться на загрузку HTMLTemplateElement, вот более современный подход к загрузке шаблонов туземцев с помощью javascript, который также работает для вашего использования.

Прежде всего использование <template> уже лучше, чем загрузка HTML в скрытый DIV, потому что шаблоны являются вложенными и не отображают контент. Вы можете создавать шаблоны с самого начала и использовать их, когда вам нужно.

<html>
<head>
  <template>My template</template>
</head>
<body>
  <script>
  document.body.append(
    document.importNode(
      document.querySelector('template').content,
      true
    )
  )
  </script>
</body>
</html>

Или создайте их динамически.

const template = document.createElement('template')
// modify the template content
template.content.append(document.createElement('div'))
// add it to the document so it is parsed and ready to be used
document.head.append(template)

Поскольку мы хотим, чтобы содержимое шаблона было построено на основе некоторого текста, который мы получаем из сети, мы должны его проанализировать и добавить в наш template.content.

const text = fetchTemplateSomehowAsText('my-template.html')
const parsedDocument = new DOMParser().parseFromString(text, 'text/html')
template.content.append(parsedDocument.querySelector('#my-snippet'))

Если my-template.html уже завершен в тег <template>, мы можем избежать части создания элемента шаблона вручную, потому что DOMParser уже создает элемент шаблона для нас.

document.head.append(
  new DOMParser().parseFromString(text, 'text/html')
    .querySelector('template')
  )
)

Это - это фрагмент, который я использовал для динамического загрузки шаблонов в документ, который использует то, что я только что объяснил.

Ответ 5

Для простого требования вы можете попробовать:

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {     
        //do something with xhr.responseText
    }   
};      
xhr.open('GET', '/template.html');
xhr.send();

Ответ 6

вы можете загрузить шаблон async с помощью jquery ajax

$.get("/html/template01.html")
.done((data) => {
    console.info(data); // output the content of the html file
});