HTML･CSS｜JavaScriptでローカルファイルを読み込む

そもそもローカルファイルを読み込む必要なってあるでしょうか。
例えばHTMLにテキストファイルの内容を表示したりする場合には必要になるでしょう。

他にはHTMLファイルを分割して主HTMLに分割したHTMLを読み込まばコードをスッキリ見やすくすることが可能になります。

読み込みにはXMLHttpRequestオブジェクトを使用します。

サンプルとしてindex.htmlを分割してsection01.htmlを読み込むコードを作りました。

サンプルコード

サンプルコードを紹介します。
コードはindex.html、section01.html、script.jsのhtmlファイル2個とjavascriptファイル1個です。

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>JacaScriptでローカルファイル読み込み</title>
    </head>
        <h1>JacaScriptでローカルファイル読み込み</h1>
        <section id="section01"></section>
        <body>
        <script src="script.js"></script>
    </body>
</html>

sectionタグにid属性を付けて、ここに読み込んだhtmlファイルの内容を埋め込みます。
bodyタグの最後でJavaScriptを読み込んでいます。

section01.html

<h2>読み込まれたファイルです。</h2>
<h3>読み込まれたファイルです。</h3>
<h4>読み込まれたファイルです。</h4>
<h5>読み込まれたファイルです。</h5>

たわいも無いコードでですが見出しタグだけでHTMLファイルをを作成しました。
この内容がindex.htmlに読み込まれ表示されるはずです。

script.js

(function()
{
    let xmlHttp =   new XMLHttpRequest();
    xmlHttp.open("GET","section01.html",true);
    xmlHttp.send(null);
    xmlHttp.onload  =   function()
    {
        let data    =   xmlHttp.responseText;

        let elm     =   document.getElementById("section01");
        elm.innerHTML   =   data;
    }
})()

section01.htmlを読み込みエレメントを取得してHTMLを書き換えます。

ブラウザで確認


こんな感じでブラウザに表示されます。

まとめ

便利ですがやりすぎ注意です。

過度に使うと表示速度が低下しSEO的にも影響します。
またファイルを多く作りすぎたら？？？になりかねませんので、最低限の使用をお勧めします。

コメント