JavaScriptsでソースをインクルード
bebox
JavaScriptsを使って任意のソースをインクルードするやり方です。
各ページの共通部分を別ファイルにし、それをインクルードすることで同じソースを何度も書かなくて済みます。
（１）インクルードされる側のファイルを作る。
┃inc.js
- // HTMLが読み込み終わる最後に記述して呼び出し
- window.onload = function(){
- // 関連記事を画面に表示
- var strKanren_Kiji = '<div style="border:1px solid #ddd; padding: 20px;">' +
- '<ul style="list-style-type: none;">' +
- '<li>関連記事</li>' +
- '<li><a href="/nail/">100均のネイルシールをオシャレにアレンジ</a></li>' +
- '<li><a href="/nail/inknail.html">DLAWのアートインクを使ってインクネイル</a></li>' +
- '</ul>' +
- '</div>';
- var tgtID = document.getElementById('kanren-kiji'); // 追加する場所取得
- tgtID.innerHTML = strKanren_Kiji; // コードを追加
- }
- 「window.onload」イベントで実行する関数にする。
- 変数「strKanren_Kiji」に挿入するコードを格納してる。
- 「+」はJavaScriptsで文字列結合の事
- 「getElementById」でターゲットとなる「ID=kanren-kiji」のある場所を取得
- 「innerHTML」で見つかった場所にコードを挿入する。
（２）呼び出し側の挿入箇所にコードを記述し、更に（１）を呼び出すコードを記述する。
┃index.html
- <!doctype html>
- <html lang="ja">
- <head>
- ・・・
- </head>
- <body>
- <main>
- <div class="container">
- <div class="row">
- <!-- 左側 -->
- <div class="col span-9">
- <article class="news">
- <section>
- <div class="wata-rei">
- ご協力いただいたKYROOM_NAILさん、ありがとうございました。<br>
- <a href="https://www.kyroom.net/">KYROOM_NAIL</a>
- </div>
- </section>
- </article>
- <!-- 関連記事 -->
- <div id="kanren-kiji"></div>
- </div>
- <!-- 右側 -->
- <div class="col span-3">
- ・・・
- </div>
- </div>
- </div>
- </main>
- <!-- インクルード実行部（必ず最後に書く） -->
- <script src="js/inc.js"></script>
- </body>
- </html>
- 「<div id="kanren-kiji">〇〇〇</div>」が挿入箇所。結果「〇〇〇」にコードが挿入される。
- 「<script src="js/inc.js"></script>」で実行関数を呼び出し。
- すべてのソースが読み込み終わった後に実行となるよう、ソースの一番最後に書く。
これで「<div id="kanren-kiji"></div>」の所が「inc.js」に置き換わる。
「innerHTML」は完全に置き換わってしますが、既存ソースの前後などに追記したい場合は「insertAdjacentHTML」を使うと良い。
insertAdjacentHTML(position ,text)
例）insertAdjacentHTML(’beforeend’, ’<p>追加するHTMLソース</p>’)
［position］
beforebegin: 要素の直前に挿入
afterbegin: 要素の最初の子要素として挿入
beforeend: 要素の最後の子要素として挿入
afterend: 要素の直後に挿入
