複数ページからなる一連の文章を見る時、 単行本や文庫本のように読んだところまで「しおり」をはさんで、 続きを別の機会に見たくありませんか?
以下に挙げるコードは Frame 形式のドキュメントの位置をオペレータの指示で
Cookie に記憶し、次回呼出された時に記憶した場所を表示するためのものです。
長い解説や小説のように複数のページを順番に読むようなドキュメントで使用できます。
Frame の親( MenuTop.htm )
<head> : <script language="JavaScript"><!-- // 設定項目 expireperiod = 1000*60*60*24*365; // 有効期間( 1年間 ) cookiename = 'shiori'; // Cookie 名 defaultURL = '../Title.htm'; // デフォルトのページ menuURL = 'Contents.htm'; // メニューページ mainWname = 'tips'; // 本文フレーム名 menuWname = 'index'; // メニューフレーム名 shiori = ''; // ====================== cookie functions ==================== function setCookie(name,value,expire){ document.cookie = name + '=' + escape(value) + ((expire==null)?'':('; expires='+expire.toGMTString())); } function getCookie(name){ var search = name + '='; if (document.cookie.length>0) { offset = document.cookie.indexOf(search); if (offset != -1){ offset += search.length; end = document.cookie.indexOf(';',offset); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(offset,end)); } } return ''; } // ====================== bookmark functions =================== function setShiori(){ // しおり設定関数 var today = new Date(); var expires = new Date(); expires.setTime(today.getTime()+expireperiod); setCookie( cookiename,eval('window.'+mainWname+'.location.href'), expires ); getShiori(); } function clearShiori(){ // しおり削除関数 var expires = new Date(0); setCookie(cookiename,'',expires); shiori = ''; } function getShiori(){ // しおり取出し関数 shiori = getCookie(cookiename); return shiori; } // ===================== フレーム生成 ========================== getShiori(); // --></script> </head> <script language="JavaScript"><!-- document.writeln( '<frameset cols="30%,*">' + '<frame src="'+menuURL+'" name="'+menuWname+'">' + '<frame src="' + ((shiori=='')?defaultURL:shiori) + '" name="'+mainWname+'">' +'<\/frameset>' ); // --></script> :
Frame の子( Contents.htm )
<script language="JavaScript"><!-- if(parent.setShiori){ document.writeln( '<div align=center><form name="f"><b>しおり:<\/b>' + '<input type="button" value="設定" ' + onClick="parent.setShiori();">' + '<input type="button" value="解除" ' + onClick="parent.clearShiori();">' +'<\/form><\/div>' ); } // --></script>
この文字の部分は必要に応じて修正します。
cookiename, expireperiod はしおりの名称と有効期間です。
expireperiod は記憶したページの有効期間を msec 単位で指定します。
defaultURL, menuURL はフレームに表示するページの URL で、
defaultURL はしおりが設定されていないときに表示する本文の URL、
menuURL はここでは目次を表示するフレームの URL です。
また、menuURL は FRAMESET タグの出力を
JavaScript で行っているために使用するのみなので、ページのレイアウトに応じて適当に修正するか、
FRAMESET の出力時に直接記述するなら不要なので削除します。
mainWname, menuWname はそれぞれ本文と目次を表示する
フレームの名称です。
menuWname は menuURL
と同様に framset タグの出力に使用しているのみなので、必要に応じて修正します。
FRAMESET の出力はフレーム構成やレイアウトにに応じて
適当に修正します。
子フレーム側のスクリプトは単なるサンプルです。
「しおり」の機能を必要とするページで parent.setShiori 関数を呼び出せば
現在 mainWname のフレームに表示しているページを
Cookie に記憶しますし、parent.clearShiori 関数を呼び出せば記憶しているページを
クリアします。
使用例
このコードのサンプルは こちらです。
注意事項