2013年10月10日木曜日

jQuery で外部 HTML を読み込む方法

外部に準備した HTML を jQuery で取得して表示したい場合があります。
例えば演習問題の結果に合わせて表示するページを変えたい場合や、
端末ごとに表示するページを変えたい場合などです。

こういった場合は jQuery の load() メソッドを使って外部 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');
});

ソースコードのダウンロードはこちら

.load() を使えば外部 HTML を使ったページ作成が簡単に行えます。
ただし、Ajax を使っているため読み込みに若干時間が掛かることに注意が必要です。

0 件のコメント:

コメントを投稿