location.hash を使って「次」のページにデータを渡す方法について延べさせて頂きましたが location.search を用いても同じような事は可能です。
( その方法を詳しく書かれている方もいらっしゃいました
>>ゲット引数オブジェクト(ページ間データの受け渡し) )
上記のサイト様の記事を参考に、前記事の方法をapplyしたものを作ってみました。
( アドレスバーから &XXX=xxx とsearchオプションを追加してみてください )
【 設定法 】 HTMLのhead領域に以下のスクリプトを書きます。
<script type="text/javascript"><!--
function Prep(){
LS = new Array(); SD = new Array();
if(location.search!=""){
var P=location.search.substring(1).split('&');
for(i= 0;i<P.length;i++){
if(P[i].indexOf('=')>0 && P[i].match(/[^a-zA-Z0-9=]/)==null){
p=P[i].split('='); LS[p[0]]=p[1]; SD[p[0]]=p[1];
} } } }
function getS(Name){ return LS[Name] }
function addS(Name,val){ SD[Name] = val }
function setS() {
var S=""; for (k in SD){ S=S+k+"="+SD[k]+"&" }
if(S!="") S="?"+S.slice(0,-1);
var A=document.getElementsByTagName('A');
var myID="継承先識別文字列"; var U; var h;
for (i=0;i<A.length;i++){ U=A[i].href; h="";
if (U.indexOf(myID)!=-1) {
if(U.indexOf("#")>0){
var p=U.split("#"); U=p[0]; h="#"+p[1];
}
A[i].href=U+S+h;
} } }
Prep();
// --></script>
【 解 説 】 今回の内容はblogに用いるものではありません。 CGI等の作り出すページではなく
サンプルに示したようなHTMLファイル間でデータを継承するシステムです。
Prep() は受信用と送信用に二つの配列を用意し自アドレスのデータを入力します。
getS(Name) は Name という名の要素の値を受信したデータから取り出します。
addS(Name,val) は Name という名の要素を val という値で更新(追加)します。
setS() は継承(or更新/追加)されたデータを次頁リンクに書き足します。
このシステムにより頁内の自ファイルへのリンクURLは以下のようになります
http://〜.html?name1=value1&name2=value2 ・・・&nameN=valueN
このスクリプトを持つHTMLファイル同士は複数世代でデータを継承可能となります。
扱えるデータは半角英数字のみですが特定の用途には便利かもしれません。
頁内ラベルはそのまま有効になります(後でスクロールアップする必要がない)から前記事の方法より優れているようにも思えますが、FC2blogのようなCMSで使用するには問題もあります。
コメント投稿(編集)時などに全データが失われてしまうのはlocation.hashを用いる前記事の方法も同様なのですが、
本来のsearchオプションもデータとして取り込んでしまうのです。 それ自体も困りますが、より深刻な問題は次頁リンクにその値を載せてしまう事です。 blog が正常に表示されなくなってしまう可能性が高いのです。
FC2blogのオリジナル形式アドレスはいうまでもなく、(タグ)検索やstyle指定頁には用いる事ができません。(前記事と同様な方法で回避する事は可能でしょうが それを行えば前記事の方法に対する利点は失われてしまいます)。
ページ間のデータ伝達にはこの他にシャドウページ(フレーム)を介在させる方法とかも思い浮かびますが、 何だか最近、HTMLとスクリプトだけでもかなり(今まで自分で思っていた以上に)インタラクティブでダイナミックなコンテンツが作れるのではないかという気がして来ている管理人です。
| . |