teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問JSでの共通パーツインクルードが出来ない

編集履歴

質問編集履歴

4

修正

2021/09/16 16:52

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -140,7 +140,7 @@
140
140
 
141
141
  window.addEventListener('DOMContentLoaded', function () {
142
142
 
143
- fetch('loader.html')
143
+ fetch('/assets/include/index-loader.html')
144
144
 
145
145
  .then(response => response.text())
146
146
 
@@ -150,9 +150,9 @@
150
150
 
151
151
  const html = parser.parseFromString(data, "text/html");
152
152
 
153
- const p_elements = html.querySelector('.loader');
153
+ const p_elements = html.getElementsByClassName('loader')[0];
154
-
154
+
155
- const file_area = document.getElementsByClassName("loader");
155
+ const file_area = document.getElementsByClassName("loader")[0];
156
156
 
157
157
  file_area.innerHTML = p_elements.innerHTML;
158
158
 
@@ -196,6 +196,8 @@
196
196
 
197
197
  ```
198
198
 
199
+ これでできたのですが、Ajaxより若干もたつくのはどうにかならないのでしょうか。
200
+
199
201
 
200
202
 
201
203
  ### 補足情報（FW/ツールのバージョンなど）

3

修正

2021/09/16 16:52

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -182,7 +182,7 @@
182
182
 
183
183
  <!-- loader -->
184
184
 
185
- <div class="index-loader">
185
+ <div class="loader">
186
186
 
187
187
  <svg>
188
188
 

2

修正

2021/09/16 16:41

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -184,12 +184,16 @@
184
184
 
185
185
  <div class="index-loader">
186
186
 
187
+ <svg>
188
+
187
189
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"　style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
188
190
 
189
- </svg>
191
+ </svg>
190
192
 
191
193
  </div>
192
194
 
195
+ </body>
196
+
193
197
  ```
194
198
 
195
199
 

1

修正

2021/09/16 16:41

投稿

erp
erp

スコア46

test CHANGED
File without changes
test CHANGED
@@ -134,6 +134,66 @@
134
134
 
135
135
 
136
136
 
137
+ Fetch APIを使って書き換えましたが、まだ表示されません。エラーはないです。
138
+
139
+ ```JS
140
+
141
+ window.addEventListener('DOMContentLoaded', function () {
142
+
143
+ fetch('loader.html')
144
+
145
+ .then(response => response.text())
146
+
147
+ .then(data => {
148
+
149
+ const parser = new DOMParser();
150
+
151
+ const html = parser.parseFromString(data, "text/html");
152
+
153
+ const p_elements = html.querySelector('.loader');
154
+
155
+ const file_area = document.getElementsByClassName("loader");
156
+
157
+ file_area.innerHTML = p_elements.innerHTML;
158
+
159
+ });
160
+
161
+ });
162
+
163
+ ```
164
+
165
+ include
166
+
167
+ ```HTML
168
+
169
+ <!DOCTYPE html>
170
+
171
+ <html lang="ja">
172
+
173
+ <head>
174
+
175
+ <meta charset="utf-8">
176
+
177
+ <title>test</title>
178
+
179
+ </head>
180
+
181
+ <body>
182
+
183
+ <!-- loader -->
184
+
185
+ <div class="index-loader">
186
+
187
+ <rect x="50" y="20" rx="20" ry="20" width="150" height="150"　style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
188
+
189
+ </svg>
190
+
191
+ </div>
192
+
193
+ ```
194
+
195
+
196
+
137
197
  ### 補足情報（FW/ツールのバージョンなど）
138
198
 
139
199
  Firefox 最新版、XAMPP、Safari 604.1