web-dev-qa-db-fra.com

Charger le modèle HTML avec JavaScript

J'ai du mal à trouver une solution propre à mon problème et je me demandais si quelqu'un pouvait offrir des conseils.

J'ai "templates.html" qui contient une collection d'extraits HTML que je veux charger en JavaScript et utiliser. Quelle est la bonne façon d'accéder aux modèles/extraits de code en gardant à l'esprit que templates.html n'est pas un document DOM chargé?

Je pensais utiliser document.open pour créer un DOM auquel accéder mais je pense que cela a des problèmes avec certains navigateurs.

javascripthtmltemplates
40
iancrowther

Vous pouvez charger le html dans un div caché, puis vous aurez un accès DOM la manière la plus simple de charger le html dans un DIV utilise jquery load: http://api.jquery.com/load/ =

$( "#result" ).load( "ajax/test.html" );
22
kleinohad

Utilisez jQuery et la méthode .load() ( http://api.jquery.com/load/ ) pour injecter le document chargé dans le DOM.

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

C'est un peu vieux mais puisque "Charger le modèle HTML avec JavaScript" devrait de nos jours faire référence au chargement d'un HTMLTemplateElement voici une approche plus moderne pour charger des modèles natifs avec javascript qui fonctionne également pour votre cas d'utilisation.

Tout d'abord en utilisant <template> est déjà mieux que de charger du HTML dans un DIV caché car les modèles sont inertes et n'affichent pas de contenu. Vous pouvez avoir les modèles rendus depuis le début et les utiliser quand vous en avez besoin.

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

Ou créez-les dynamiquement.

const template = document.createElement('template')
// modify the template's 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)

Parce que nous voulons que le contenu du modèle soit construit en fonction du texte que nous obtenons du réseau, nous devons l'analyser et l'ajouter à notre template.content.

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

Si my-template.html vient déjà enveloppé dans le <template> tag nous pouvons éviter la partie de la création de l'élément de modèle manuellement car le DOMParser crée déjà l'élément de modèle pour nous.

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

This est un extrait que j'ai utilisé pour charger dynamiquement des modèles dans le document qui utilise ce que je viens d'expliquer.

17
olanod

une autre façon de le faire est d'utiliser requireJS .

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

Pour les besoins simples, vous pouvez essayer:

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

vous pouvez charger le modèle asynchrone en utilisant jquery ajax

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