-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinclude.js
40 lines (36 loc) · 1.23 KB
/
include.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*=====================================================================
部分ファイルを読み込むための include 関数
[使い方]
<nav id="navigation"></nav>
<script>include("navigation")</script>
navタグが、_navigation.html に置き換わる。
[参考]
HTMLで簡単インクルード！ https://jp-seemore.com/web/2408/
=====================================================================*/
const include = (partial) => {
let filename = ""
if (partial.includes("../")) {
// 親ディレクトリを参照する
partial = partial.slice(3)
filename = `../_${partial}.html`
} else {
filename = `_${partial}.html`
}
let id = partial
fetch(filename)
.then(response => response.text())
.then(data => document.getElementById(id).outerHTML = data)
}
// <head>タグ専用
// <head>
// <script src="include.js"></script>
// <script>includeHead()</script>
// </head>
// headタグが、_head.html に置き換わる。
//
// 本番環境では、画面の再描画が発生し、1秒ほどちらつくため使用不可
const includeHead = () => {
fetch("_head.html")
.then(response => response.text())
.then(data => document.querySelector("head").innerHTML = data)
}