質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1595閲覧

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

erp

総合スコア46

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/09/16 12:35

編集2021/09/16 16:52

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

投稿2021/09/16 15:04

編集2021/09/16 15:05
k4a

総合スコア983

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

erp

2021/09/19 19:34

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

0

ベストアンサー

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

総合スコア114585

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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 () { }) では、クリックイベント自体が起こりませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問