JSでの共通パーツインクルードが出来ない

前提・実現したいこと

AjaxでのHTMLインクルードから脱しようと、ネイティブJSで書く方法を調べて試したのですが、上手くいきませんでした。テストはXAMPP, サーバー上です。

発生している問題・エラーメッセージ

エラー特に出ていません。

該当のソースコード

JS
1//loadでパーツのみ読み込みJavascript
2var js = function () {
3  var xhr_01 = new XMLHttpRequest(),
4    xhr_02 = new XMLHttpRequest(),
5    method = "GET",
6    url_01 = "loader.html", //読み込まれるHTMLを指定
7    url_02 = "footer.html"; //読み込まれるHTMLを指定
8  var box_01 = document.getElementsByClassName("loader"); //読み込みたい位置を指定
9  var box_02 = document.getElementsByClassName("footer"); //読み込みたい位置を指定
10
11  xhr_01.responseType = "document"; //XMLとして扱いたいので一応記述
12  xhr_01.open(method, url_01, true);
13  xhr_01.onreadystatechange = function () {
14    if (xhr_01.readyState === 4 && xhr_01.status === 200) {
15      var restxt_01 = xhr_01.responseXML; //重要
16      var int_01 = restxt_01.getElementsByClassName("loader")[0].getElementsByTagName("svg")[0]; //読み込まれるセレクタを指定
17      box_01.innerHTML = int_01.outerHTML; //完了
18    }
19  };
20  xhr_01.send();
21  xhr_02.responseType = "document"; //XMLとして扱いたいので一応記述
22  xhr_02.open(method, url_02, true);
23  xhr_02.onreadystatechange = function () {
24    if (xhr_02.readyState === 4 && xhr_02.status === 200) {
25      var restxt_02 = xhr_02.responseXML; //重要
26      var int_02 = restxt_02.getElementsByTagName("footer")[0].getElementsByTagName("ul")[0]; //読み込まれるセレクタを指定
27      box_02.innerHTML = int_02.outerHTML; //完了
28    }
29  };
30  xhr_02.send();
31}
32js();

index.html

HTML
1<div class="loader"></div>
2
3<footer></footer>

include

HTML
1<div class="loader">
2  <svg width="400" height="180">
3    <rect x="50" y="20" rx="20" ry="20" width="150" height="150"　style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
4  </svg>
5</div>
6
7<footer>
8  <ul>
9    <li>text</li>
10  </ul>
11</footer>

試したこと

ネイティブJSでのインクルードについて調べましたが、めぼしい記事はありませんでした。エラー出ていないけれどどうして読み込まれないのでしょうか。

Fetch APIを使って書き換えましたが、まだ表示されません。エラーはないです。

JS
1window.addEventListener('DOMContentLoaded', function () {
2  fetch('/assets/include/index-loader.html')
3    .then(response => response.text())
4    .then(data => {
5      const parser = new DOMParser();
6      const html = parser.parseFromString(data, "text/html");
7      const p_elements = html.getElementsByClassName('loader')[0];
8      const file_area = document.getElementsByClassName("loader")[0];
9      file_area.innerHTML = p_elements.innerHTML;
10    });
11});

include

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>test</title>
6</head>
7<body>
8  <!-- loader -->
9  <div class="loader">
10    <svg>
11     <rect x="50" y="20" rx="20" ry="20" width="150" height="150"　style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
12    </svg>
13  </div>
14</body>

これでできたのですが、Ajaxより若干もたつくのはどうにかならないのでしょうか。

補足情報（FW/ツールのバージョンなど）

Firefox 最新版、XAMPP、Safari 604.1

行動規範の内容に同意します

回答2件

getElementsByClassNameはHTMLCollectionを返します。
先頭要素を取得するのであればgetElementsByClassName('hoge')[0]のようにして下さい。

また、個人的にはXMLHttpRequest APIよりFetch APIを利用することをおすすめします。

投稿2021/09/16 15:04

編集2021/09/16 15:05

k_a

総合スコア983

erp

2021/09/19 19:34

Fetch API で調べてみました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  const url_01 = '/assets/include/index-loader.html';
3  const  box_01 = document.querySelector(".loader");
4  fetch(url_01)
5    .then(res=>res.text())
6    .then(txt=>new DOMParser().parseFromString(txt,'text/html'))
7    .then(dom=>[...dom.querySelectorAll('.loader > *')])
8    .then(arr=>arr.reduce((x,y)=>x.appendChild(y),document.createDocumentFragment()))
9    .then(frg=>box_01.appendChild(frg));
10});

投稿2021/09/17 00:48

編集2021/09/17 01:02

yambejp

総合スコア116724

erp

2021/09/20 05:55

思ったように実装できました。ありがとうございます。一つ質問があります。このようにインクルードした要素に対して、クリックイベントを起こしたいのですが $(document).on('click', btn, function () {}) のようにすると、ページのどこを押してもイベントが起きてしまいます。 $('nav').on('click', btn, function () {}) こうすると、ナビゲーションの他のリンクを押そうとすると、クリックイベントが起こってしまい、とても困っています。どうすればいいでしょうか。

erp

2021/09/20 05:57

btn.on('click', function () { }) では、クリックイベント自体が起こりませんでした。

行動規範の内容に同意します

あなたの回答