jQueryを用いた外部htmlファイルのインクルード

Web制作

• HTML
• jQuery

概要

jQueryを使用して外部htmlファイルを読み込む。

ヘッダーやフッターなど、複数ページでの共通部分を管理するのに便利。

jQueryを使わずに同様の処理を行いたい場合は「[VanillaJS] 外部htmlファイルのインクルード」を参照。

基本

読み込む側のhtml

<header></header>
~~~
<script>
  $(function(){
    $("header").load("path/to/header.html");
  })
</script>

header.html

<span>header</span>

出力内容

<header><span>header</span></header>

外部ファイルの一部分だけを読み込む

読み込む側のhtml

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

header.html

~~~

<span id="headerInner">header</span>

~~~

出力内容

<header>
  <span id="headerInner">header</span> 
</header>

読み込んだ部分にJavaScriptを適用させる

誤った例

読み込む側のhtml

<header></header>
  ~~~
  <script>
    $(function(){
      $("header").load("path/to/header.html #headerInner");
      document.getElementById("headerInner").textContent = 'included';
    })
  </script>

header.html

~~~

<span id="headerInner">header</span>

~~~

出力内容

<header>
  <span id="headerInner">header</span> 
</header>

正しい例

読み込む側のhtml

<header></header>
  ~~~
  <script>
    $(function(){
      $("header").load("path/to/header.html #headerInner", function(){
        document.getElementById("headerInner").textContent = 'included';
      });
    })
  </script>

header.html

~~~

<span id="headerInner">header</span>

~~~

出力内容

<header>
  <span id="headerInner">included</span> 
</header>

読み込んだ部分に外部ファイルのJavaScriptを適用させる

読み込む側のhtml

<header></header>
  ~~~
  <script>
    $(function(){
      $("header").load("path/to/header.html #headerInner", function(){
        $.getScript('path/to/foo.js');
      });
    })
  </script>

header.html

~~~

<span id="headerInner">header</span>

~~~

foo.js

document.getElementById("headerInner").textContent = 'included';

出力内容

<header>
  <span id="headerInner">included</span> 
</header>