Welcome to SHIGETOMO's Web Site

ＣＧＩ−Ｔｉｐｓ／いまさら ＪａｖａＳｃｒｉｐｔ

フレーム、ＳＳＩを用いずにメニュー欄を作る

　フレームを使おうとすると全頁に広告バナーが挿入される経験はありませんか。

　ノーフレームでＳＳＩを使おうとしてもＳＳＩが使えないとき、使えたとしてもファイル名等の変更を余儀なくされ、実質的に使えないときなど、ＪａｖａＳｃｒｉｐｔはＳＳＩの代わりになります。

　この頁では「メニューを埋め込む」という方法を用いて「フレームもどき」のページを作る例を紹介します。

　＜ＨＴＭＬ側の記述＞

　テーブルを作成し、その左欄の内容として以下の「埋込」コマンド１行を記述します。（→サンプル）

　<SCRIPT SRC="menu.js"></SCRIPT>

　ここで、"menu.js" はジャバスクリプト・コマンドにより実際のメニューが記述されたテキストファイルです。

　＜埋込ファイル( menu.js )側の記述＞

　埋込ファイルとして、例えば、"menu.js" という名のテキストファイルを作成し、ジャバスクリプト・コマンドにより実際のメニューを記述しておきます。（→サンプル）

　これはネットスケープだけの話かもしれませんが、ジャバスクリプトを利用している頁の漢字コードはＳＨＩＦＴ−ＪＩＳにしないと文字化けするようです。　この頁の場合は menu.js のみ Shift-JIS、他のＨＴＭＬはＥＵＣコードを用いています。

ＨＴＭＬサンプル

　以下はＨＴＭＬの雛形です。
<html><!--漢字コード：ＥＵＣ-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>CGI-Tips/JavaScript</title>
</head>
<body bgcolor="#F0F0D0" background="image/common/bg.gif" text="black" link="blue" vlink="brown">
<br>
<center><table width=100%% border=0 cellspacing=0 cellpadding=4>
<tr><td width=164 valign=top bgcolor="#A0A060">
<!-- メニュー欄開始（埋込） -->
<SCRIPT SRC="menu.js"></SCRIPT>
<!-- メニュー欄終了 -->
</td><td width=100%% valign=top>
<!-- 本文欄開始 -->
<center><table width=620 border=0 cellspacing=0 cellpadding=0><tr><td>
<center>
<!-- 本文欄ヘッダ -->

<p><!-- 本文欄用カウンタ　始め -->
<SCRIPT>
<!--
if (document.domain == "localhost") {
document.write("<img src=/cgi-bin/local/agcount.pl?df=geos00&mode=AC&ft=3&dd=agc1
&curtain=wcome01 width=96 height=26 alt=LocalCounter><br>");
} else {
document.write("<img src=http://shigetomo.nantoka.com/cgi-bin/agcount.pl?df=geos00
&mode=AC&ft=3&dd=agc1&curtain=wcome01 width=96 height=26><br>");
}
// -->
</SCRIPT>
<NOSCRIPT>
<img
src="http://shigetomo.nantoka.com/cgi-bin/agcount.pl?df=geos00
&mode=AC&ft=3&dd=agc1&curtain=wcome01" width="96" height="26"><br>
</NOSCRIPT>
<!-- カウンタ　終わり -->

<!-- 本文 -->

<!-- 本文欄フッタ -->
<br><br>
<!-- 本文欄終了 -->
</center>
</td></tr></table></center>
</td></tr></table>
</body>
</html>



　▲ 頁トップ

サンプルメニュースクリプト( menu.js )

　スクリプトファイルでは <SCRIPT>, </SCRIPT>, <NOSCRIPT>, </NOSCRIPT> タグは使わない点に注意して下さい。

　ファイルの漢字コードは Shift-JIS にしたほうが文字化けしないようです。

document.writeln('<!-- メニュー欄開始 -->');
document.writeln('<center>');
document.writeln('<br><img src=image/logo/shige01rr.gif width=139 height=18 alt="SHIGETOMO"><br>');
document.writeln('<p><font size=+1 color=darkgreen><b>shigetomo@geocities</b></font><br>');
// メニュー欄用カウンタ 始め
if (document.domain == "localhost") { document.writeln('<p><table border=1 cellspacing=0 cellpadding=0><tr><td><img src="/cgi-bin/local/agcount.pl?df=geosmenu" width="90" height="20" alt="LocalCounter"><br></td></tr></table>'); } else { document.writeln('<p><table border=1 cellspacing=0 cellpadding=0><tr><td><img src="/cgi-bin/geocounter/userID" width="90" height="20" alt="GeoCounter"><br></td></tr></table>'); } // メニュー欄用カウンタ 終わり
document.writeln('</center>');
document.writeln('<p><table border=0 cellspacing=0 cellpadding=2>');
document.writeln('<tr><td><img src=image/common/rball.gif width=14 height=14> <a href=./index.html><font size="+0"><b>トップ頁・更新履歴</b></font></a></td></tr>');
document.writeln('<tr><td><img src=image/common/rball.gif width=14 height=14> <a href=./counter.html><font size="+0"><b>リンク先ホスト名</b></font></a><br>　　<a href=./counter.html><font size="+0"><b>の自動変更</b></font></a></td></tr>');
document.writeln('<tr><td><img src=image/common/rball.gif width=14 height=14> <a href=./menu.html><font size="+0"><b>メニュー欄埋込表示</b></font></a></td></tr>');
document.writeln('<tr><td><img src=image/common/rball.gif width=14 height=14> <a href=http://tokyo.cool.ne.jp/shigetomo/><font size="+0"><b>CGI-Tips</b></font></a></td></tr>');
document.writeln('<tr><td><hr></td></tr>');
document.writeln('</table>');
document.writeln('<!-- メニュー欄終了 -->');



　▲ 頁トップ


　▲ 頁トップCreated : Jul. 05, 2000　




GeoCities Japan