jQueryの .load() で別ページから共通パーツを読み込むのをJavaScriptに書き換え

jQueryの「.load()」メソッド

jQueryの.loadメソッドを使えば、他ファイルからHTMLパーツを指定した位置に挿入してくれる。ヘッダーやフッターなどの共通パーツを別のファイルにまとめることができるので、管理が楽になる。

以下、読み込んで表示する方を「読み込むHTML」、パーツのみ記述されている方を「読み込まれるHTML」とする。

<!-- 読み込まれるHTML「common.html」 -->
<header>
  <ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
    <li>menu5</li>
  </ul>
</header>

<footer>
  <ul>
    <li>fot1</li>
    <li>fot2</li>
    <li>fot3</li>
    <li>fot4</li>
    <li>fot5</li>
  </ul>
</footer>
<!-- 読み込むHTML「index.html」 -->
<html>

<head>
  <title>サンプルページ</title>
</head>

<body>
  <div id="box"></div>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>
    $(function () {
      $("#box").load("common.html");
    });
  </script>
</body>

</html>

上記のファイルを読み込むと、下記の通りになる。読み込まれるHTMLには、headタグなどは不要。読み込みたいタグのみ記述しておけばよい。

<html>

<head>
  <title>サンプルページ</title>
</head>

<body>
  <div id="box">
    <header>
      <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
      </ul>
    </header>

    <footer>
      <ul>
        <li>fot1</li>
        <li>fot2</li>
        <li>fot3</li>
        <li>fot4</li>
        <li>fot5</li>
      </ul>
    </footer>
  </div>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>
    $(function () {
      $("#box").load("common.html");
    });
  </script>
</body>

</html>

「.load()」をJavascriptに書き換え

<script>
  var myXml = new XMLHttpRequest();
  myXml.onreadystatechange = function () {
    if ((myXml.readyState === 4) && (myXml.status === 200)) {
      document.getElementById("box").innerHTML = myXml.responseText;
    }
  }
  myXml.open("GET", "common.html", true);
  myXml.send(null);
</script>

「.load()」メソッドでパーツのみ読み込み

.loadで読み込まれるHTMLの特定要素のみ読み込みたい場合、以下のように記述する。

<script>
  $(function(){
    $("#box").load("common.html header");
  });
</script>

読み込み後は以下の通り。

<html>

<head>
  <title>サンプルページ</title>
</head>

<body>
  <div id="box">
    <header>
      <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
      </ul>
    </header>
  </div>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>
    $(function () {
      $("#box").load("common.html header");
    });
  </script>
</body>

</html>

以下のような記述もすることができる。

$("#header").load("common.html header ul li:nth-child(1)");

読み込まれるHTMLに、headerやfooterなどの共通パーツをいくつか記述しておけば、管理がもっと楽になる。

書き換えJavascript

JavaScriptでパーツのみ読み込む場合、以下のように記述する。

<script>
  var myXml = new XMLHttpRequest();
  myXml.responseType = "document"; //XMLとして扱いたいので一応記述
  myXml.onreadystatechange = function () {
    if ((myXml.readyState === 4) && (myXml.status === 200)) {
      var restxt = myXml.responseXML; //重要
      var int = restxt.getElementsByTagName("header")[0].getElementsByTagName("ul")[0]; //読み込まれるセレクタを指定
      box.innerHTML = int.outerHTML; //完了
    }
  }
  myXml.open("GET", "common.html", true);
  myXml.send(null);
</script>

ドキュメント丸ごと入れるのであればresponseTextでも良いが、取得したドキュメントからオブジェクトを取得するのであれば、XML型で扱う必要がある。

inserted by FC2 system