2013年10月10日木曜日

jQuery の .load() で HTML ファイルを読み込む

環境:jQuery 1.10

jQuery の .load() メソッドを使って HTML ファイルを読み込み、
現在表示中のページ内に挿入することができます。

予め複数パターンの HTML を準備しておき、
条件分岐によって、表示内容を切り替えるといった場合に使用可能です。

APIドキュメントはこちら
.load() - jQuery


サンプルを作成したのでご覧ください。
サンプルページ - okanoworld


index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>jQuery load() sample</title>
 </head>
 <body>
  <h1>ここに外部 HTML ファイルを表示します</h1>
  <div id="page"></div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="load.js"></script>
 </body>
</html>

external.html
<h2>外部ファイル</h2>
<p>この文章は external.html に記載された外部 HTML の文章です</p>

load.js
$(function() {
 $('#page').load('external.html');
});


2 件のコメント:

  1. $(function() {
    $('#page').load('external.html');
    });
    上記はjQuery3.0では非推奨です。jQuery3.0ではどう書くのでしょうか。

    返信削除
    返信
    1. jQuery 3.0 以前は、 .load() という同名のメソッドが 2 つありました。

      1. 要素の読み込み完了時のイベントハンドラを登録する
      http://api.jquery.com/load-event/

      2. サーバからデータを取得して要素へ挿入する
      http://api.jquery.com/load/

      同じ .load() という名前のメソッドですが、
      渡される引数によって、どちらのメソッドが呼び出されるかが決定されていました。

      jQuery 3.0 で削除されたのは 1 のイベント用の処理で、
      こちらのページで紹介しているのは 2 のデータ取得用の処理です。
      データ取得用の .load() は jQuery 3.0 でも、そのまま使用可能です。

      削除