jQueryのload()を使い、外部htmlを読み込む方法（firefox推奨）

カテゴリー︎： 【JavaScript】・【jQuery】

開発環境をつくるのは面倒なので

ローカル環境で

手っ取り早く、jQueryのload()を使い、外部htmlを読み込む方法

準備（１）

読み込むhtmlを１０個つくる(11個以上も読み込める仕様)

load_1.html 〜　　load_10.html
↓

  <div class="load_<span class="code_red">1</span>">
    <p>load_1.htmlを読み込み成功。</p>
  </div>

上記内容のhtmlファイルを１0枚つくる
class名は連番をつける

load_1.html
load_2.html
load_3.html
load_4.html
load_5.html　…

load_1
load_2
load_3
load_4
load_5 …

という感じで、htmlファイル名も合わせる

準備（２）

読み込みもと（本体）のindex.htmlを作る
↓

<body>
  <div id="wrap">
    <h1>Ajaxで読み込むhtmlファイル</h1>
    <div class="load_1"></div>
    <div class="load_2"></div>
    <div class="load_3"></div>
    <div class="load_4"></div>
    <div class="load_5"></div>
    <div class="load_6"></div>
    <div class="load_7"></div>
    <div class="load_8"></div>
    <div class="load_9"></div>
    <div class="load_10"></div>
  </div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script>
  $(function() {
    for (var i = 0; i <= $("div:not(#wrap)").length; i++) {
      console.log($("div:not(#wrap)").length); // id="wrap"以外を取得
      $("div.load_" + i).load("load_" + i + ".html p");
    }
    /*for文で出力結果前*/
    // $("div.load_1").load("load_1.html p");
    // $("div.load_2").load("load_2.html p");
    // $("div.load_3").load("load_3.html p");
    // $("div.load_4").load("load_4.html p");
    // $("div.load_5").load("load_5.html p");
    // $("div.load_6").load("load_6.html p");
    // $("div.load_7").load("load_7.html p");
    // $("div.load_8").load("load_8.html p");
    // $("div.load_9").load("load_9.html p");
    // $("div.load_10").load("load_10.html p");
  });
  </script>
</body>

サーバーにUPするのが面倒なので

Firefoxで作業確認する(Ajaxが動く)

chrome, safariは確認できない

PAGE TOP