「部門/HTML/Frameを使わずにFrameっぽくする」の編集履歴（バックアップ）一覧はこちら

部門/HTML/Frameを使わずにFrameっぽくする - (2011/11/07 (月) 00:14:36) の最新版との変更点

追加された行は緑色になります。

削除された行は赤色になります。

例えばこのページの左側のようなメニューを作りたいとき、個人用ページではフレームを使ってる場合がけっこうある。けど、あれはうざいと思う。さりとてメニューの部分のソースをすべてのページに書きこむのは馬鹿げているので、Frameを使わずに別のHTMLファイルを読み込む方法はないものかと調べてみたところ、Javascriptを使う方法を見つけた。
-[[HTMLタグが書かれた外部ファイルを、HTMLファイルに読込みたい - HTML - 教えて！goo>http://oshiete.goo.ne.jp/qa/771400.html]]
-[[JavaScriptの外部ファイル－JavaScript入門>http://www.pori2.net/js/kihon/16.html]]
-[[scriptタグの中にJavaScriptを書く正しい方法 - d.aql>http://d.hatena.ne.jp/aql/20060615/1150300264]]
-[[DHTML -2->http://www.calm-web.com/lecture/dhtml2/lect03_02.html]]
というわけでhttp://wwwkm.phys.sci.osaka-u.ac.jp/~oka/ ではヘッダーの部分で
#highlight(html){{<script type="text/javascript" src="menu.js"></script>}}
と書いておき、メニューの部分は
#highlight(html){{
<div id = "menu">
<script type="text/javascript">
<!--
menu();
// -->
</script>
</div>}}
となっている。menu.jsの中身は
#highlight(javascript){{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けっこう気に入ったかも。

*おまけ
ほんとにフレームっぽくするには、
 -[[「擬似フレーム（疑似フレーム）」の作り方（IE6 にも対応、スタイルシート(CSS)、JavaScript使用）>http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html]]
などを参照。

例えばこのページの左側のようなメニューを作りたいとき、個人用ページではフレームを使ってる場合がけっこうある。けど、あれはうざいと思う。さりとてメニューの部分のソースをすべてのページに書きこむのは馬鹿げているので、Frameを使わずに別のHTMLファイルを読み込む方法はないものかと調べてみたところ、Javascriptを使う方法を見つけた。
-[[HTMLタグが書かれた外部ファイルを、HTMLファイルに読込みたい - HTML - 教えて！goo>http://oshiete.goo.ne.jp/qa/771400.html]]
-[[JavaScriptの外部ファイル－JavaScript入門>http://www.pori2.net/js/kihon/16.html]]
-[[scriptタグの中にJavaScriptを書く正しい方法 - d.aql>http://d.hatena.ne.jp/aql/20060615/1150300264]]
-[[DHTML -2->http://www.calm-web.com/lecture/dhtml2/lect03_02.html]]
というわけでhttp://wwwkm.phys.sci.osaka-u.ac.jp/~oka/ ではヘッダーの部分で
#highlight(html){{<script type="text/javascript" src="menu.js"></script>}}
と書いておき、メニューの部分は
#highlight(html){{
<div id = "menu">
<script type="text/javascript">
<!--
menu();
// -->
</script>
</div>}}
となっている。menu.jsの中身は
#highlight(javascript){{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けっこう気に入ったかも。

*おまけ
ほんとにフレームっぽくするには、
-[[「擬似フレーム（疑似フレーム）」の作り方（IE6 にも対応、スタイルシート(CSS)、JavaScript使用）>http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html]]
などを参照。