IFRAMEを使わずページをロードする
下記のHTMLのリンク先が cotent に表示される。CGIのように、?pagenameで内容を指定して表示できる。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Help</title> <script type="text/javascript" src="../libs/prototype.js"></script> <script type="text/javascript" src="../libs/loader.js"></script> </head> <body onload="init()"> <div id="body"> <div id="menu"> <a href="item1.html">項目1</a> <a href="item2.html">項目2</a> </div> <div id="content"></div> </div> </body> </html>
loader.js
function init() { var aNodeList = $('menu').getElementsByTagName('a'); var nodes = $A(aNodeList); nodes.each(function(node){ node.onclick = function(e) { aclick(node); return false; }; }); var pos = window.location.href.lastIndexOf('?'); if (pos > 0) { loadContent(window.location.href.replace("?", "/") + ".html"); } } function aclick(anch) { loadContent(anch.href); } function loadContent(uri) { new Ajax.Request(uri, { method: 'get', onComplete: function(req) { var content = req.responseText; var start = content.indexOf("<body>") + 6; var end = content.lastIndexOf("</body>") - 1; $('content').innerHTML = content.substring(start, end); } }); }