IFRAME を使わずページをロードする(2)

JavaScript

今回は、jQuery を使ってみる。そしてロードしたコンテンツ内のリンクターゲットも自身にするサンプル。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function(){
  loadContent("./first.html");

  $("a", $("#menu")).each(function(){
    $(this).click(function(){
      loadContent(this.href); return false;
    });
  });
});

function loadContent(url) {
  // Loading GIF を表示
  $("#content").html('<img src="ajaxload.gif" style="display:block;margin:50px auto"/>');

  $("#content").load(url, function(){
    // ロードしたページの a リンクすべての onclick イベントで
    // #content がターゲットになるようマッピング。
    $("a", $(this)).each(function(){
      $(this).click(function(){
        loadContent(this.href); return false;
      });
    });
  });
}
//-->
</script>
</head>
<body>
<div id="header">
  <h1>Ajax Loading Test</h1>
  <ul>
    <li><a href="testA.html">testA</a></li>
    <li><a href="testB.html">testB</a></li>
  </ul>
</div>
<div id="content"><!-- 動的にページがロードされる部分 --></div>
<div id="footer">copyright</div>
</body>
</html>

testA.html, testB.html には body の innerHTML な部分しかないので、正式なHTMLファイルではない。