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');
});
$(function() {
返信削除$('#page').load('external.html');
});
上記はjQuery3.0では非推奨です。jQuery3.0ではどう書くのでしょうか。
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 でも、そのまま使用可能です。