部門 > HTML > Frameを使わずにFrameっぽくする

例えばこのページの左側のようなメニューを作りたいとき、個人用ページではフレームを使ってる場合がけっこうある。けど、あれはうざいと思う。さりとてメニューの部分のソースをすべてのページに書きこむのは馬鹿げているので、Frameを使わずに別のHTMLファイルを読み込む方法はないものかと調べてみたところ、Javascriptを使う方法を見つけた。
というわけでhttp://wwwkm.phys.sci.osaka-u.ac.jp/~oka/ ではヘッダーの部分で
<script type="text/javascript" src="menu.js"></script>
と書いておき、メニューの部分は
<div id = "menu">
<script type="text/javascript">
<!--
menu();
// -->
</script>
</div>
となっている。menu.jsの中身は
function menu() {
home="http://wwwkm.phys.sci.osaka-u.ac.jp/~oka";
document.write("<h2>Contents<\/h2>");
document.write("<p><a href=\"",home,"\">ホーム</a></p>");
document.write("<p><a href=\"",home,"/profile/profile.html\">プロフィール</a></p>");
document.write("<p></p>");
} 
というような感じ。href="hoge" という部分は、href=\"hoge\"としてやる必要がある。ただしhref=hogeにしても動く気がしないでもない。home="hogehoge"としたのは、簡単に別の場所に移せるように。Javascriptaけっこう気に入ったかも。

おまけ

ほんとにフレームっぽくするには、
などを参照。

タグ:

HTML Javascript
最終更新:2011年11月07日 00:15