web-dev-qa-db-ja.com

JavaScriptを使用してHTMLテンプレートをロードする

私は自分の問題に対する明確な解決策を見つけるのに苦労しており、誰かがいくつかのヒントを提供できるかどうか疑問に思っていました。

JavaScriptに読み込んで使用するHTMLスニペットのコレクションを含む「templates.html」があります。 templates.htmlはロードされたDOMドキュメントではないことを念頭に置いて、テンプレート/スニペットにアクセスする良い方法は何ですか？

私はdocument.openアクセスするDOMを作成しますが、これには特定のブラウザーで問題があると思います。

javascripthtmltemplates
40
iancrowther

Htmlを非表示のdivに読み込むと、jquery loadを使用して、htmlをDIVに読み込む最も簡単な方法であるDOMにアクセスできます。 http://api.jquery.com/load/ =

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

JQueryと.load()（ http://api.jquery.com/load/ ）メソッドを使用して、ロードされたドキュメントをDOMに挿入します。

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

これは少し古いですが、「JavaScriptを使用したHTMLテンプレートの読み込み」は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'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)

ネットワークから取得したテキストに基づいてテンプレートのコンテンツを構築するため、それを解析して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')
  )
)

This は、テンプレートをドキュメントに動的にロードするために使用しているスニペットであり、ここで説明した内容を使用しています。

17
olanod

これを行う別の方法は、 requireJS を使用することです。

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

単純な要求の場合は、次を試すことができます。

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

jquery ajaxを使用してテンプレート非同期をロードできます

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