引数をつけてHTMLを呼び出す

はじめに申し上げておきますが、ご不明な点があればご連絡ください。
答えられる範囲内で答えます。

たとえば、Javascriptで”test(xx){...}”みたいに関数を定義します。
で、どこかで”test()”を呼び出すわけですが、このとき”xx”を引数として”test()”に渡してやれば、”test()”の処理を”xx”を使って行うことができます。
これによって状況に応じた値を使って”test()”を実行できるわけです。
*この時点でよくわからない人は”Javascript、関数、引数”あたりで検索してみてください。

同じことを単純なHtmlについてもできます。
これによりHtmlに適当な引数を渡し、同じHtmlの動作や表示を引数によっていろいろコントロールできるようになります。

ここでは、それを行うための具体的な方法と、それに関する技術的なポイントをまとめます。
やり方によってはもっと発展させていろいろなことができるかもしれません。


1.具体的なやり方・事例

はじめに、いろいろな前提条件を決めます。今回は下記の仕様です。
引数の区切り 半角のスラッシュ”/”
引数1 010
引数2 020
引数3 030
呼び出すページ htmlparm.html

「htmlparm.html」は、あらかじめ呼び出し元から渡された引数を受け入れ、引数に応じて動作が変わるように仕込んであります。
下記は引数の渡し方と「htmlparm.html」と動作対照表です。お試しください。
htmlparm.html」の肝ソースはこちらを参照してください。
seqケース動作呼び出し
1引数1(010)"ARGUMENT is 010"をアラート <a href="htmlparm.html?/010">
2引数2(020)"ARGUMENT is 020"をアラート <a href="htmlparm.html?/020">
3未定義の引数(050)"ARGUMENT UNDEFINED"をアラート <a href="htmlparm.html?/050">
4引数1と引数2"ARGUMENT is 010"と"ARGUMENT is 020"をアラート <a href="htmlparm.html?/010/020">
5引数を渡さない何もアラートしない <a href="htmlparm.html">
6文字の引数(SRC)htmlparm.html」の肝ソースを表示 <a href="htmlparm.html?/src">

上の表の「呼び出し」に注目してください。
引数は、呼び出し先に直接指定しています。
呼び出し先から「window.opener〜」で、親ウインドウ(呼び出し元ウインドウ)を参照しているわけではありません。

まあ、種がわかればあとはいろいろなアプローチがありますから、いろいろ試してみるとよいでしょう。


2.URLの不思議

呼び出し先のHtmlのURLの末尾に半角で「?」とつけると、それ以降の文字は特別に扱われます。
たとえば、Yahoo!で何か検索したときに、検索結果のURLを見てみると、下記のような具合になっています(”財務省”を検索)。
http://search.yahoo.co.jp/bin/search?p=%BA%E2%CC%B3%BE%CA

”http://search.yahoo.co.jp/bin/search”まではどうやら検索エンジン部分のURLらしいことがわかります。
で、”?”以降についてですが、”p=”はともかく後ろの”%BA%E2%CC%B3%BE%CA”はなんでしょう。
こいつはNetscapeのJavascriptでunescape()してやると”財務省”になります。つまり検索文字列です。

ということは、”p=”の意味は、検索エンジンに渡すパラメータのようなもの、引数と考えることができます。
”http://search.yahoo.co.jp/bin/search”に対して、”p=”で指定した文字を検索キーとする、ような感じです。

ところで、通常、”http://search.yahoo.co.jp/bin/searchtest010020”などとすると、「404 Not Found」になります。(実際にはそうならないよう設計されてますが)
このようにURLを指定すると、”http://search.yahoo.co.jp/bin/search”以降の文字までをURLとし、存在しないページを探してしまい、エラーとなるのです。
URLに続けて”?”をつけ、その後に何か文字をつければ、ブラウザは”?”までをURLとみなし、それ以降は何らかのパラメータとして扱うのです。

このため、特に引数を仕込んでいないHtmlを”?〜”付きのURLで呼び出しても、まったく問題ないばかりか、そのままでは意味がありません。
下の各リンクは同じページを”?〜”付きで呼び出したり、”?〜”無しで呼び出したりしています。
呼出し後のページのURL部分にご注目ください。

以上のことから、URLの後に”?〜”をつけて呼び出しても、無害であり、かつ呼び出したページのURL表示には”?〜”の部分が表示されていることがわかります。
ちょっと無理やりでしたが、URLってこうなってます。


3.いろいろなURL取得方法

さて、2.URLの不思議の記述から、URLにつづく”?〜”の扱いについてご理解いただいていることになってます。
検索ページやCGI以外ではまったく意味の無いこの”?”以降を、Htmlで役に立てるためには、Javascriptを用いてこの”?”以降を取得・判別し、その内容に応じて処理を行えばよいのです。

現在表示中のページをJavascriptで得るには、いくつか方法があります。
下の表に、それぞれの取得方法(オブジェクト・プロパティ)や取得される値、型をまとめました。
*これらは現在表示中のページの値になります。
オブジェクトプロパティ現在のページから取得された値
DocumentLocation
DocumentURL
LocationHref
LocationPathname
WindowLocation

見てのとおり、同じオブジェクトからも複数のプロパティからURLを取得できることがわかります。
しかも取得される値はすべてが同じ、では無く、オブジェクトとプロパティの組み合わせで微妙に異なるものもあります。
しかも、ブラウザによっても表示が微妙に変わります。

さて、こんどは、引数をつけて呼び出したHtmlのURLをJavascriptで取得してみましょう。

が、その前に、取得された各値の「型」に注目してみます。
Javascriptでは、変数宣言のときに特に型を意識する必要がありません。変数宣言、というのもなんだか変ですが。
とにかくダイナミックに、いろいろな値を放り込むことができますが、四則演算やSPLITメソッドなどの配列変換をする場合には注意が必要です。

文字列同士を加算すると、文字が連結されます。
文字列同士を減算すると、共通して含まれる文字が差っぴかれるわけではなく、エラーとなります。
文字列を指定文字で区切って配列にするSPLITメソッドは型が「STRING(文字列)」でないと失敗し、さらに区切りに指定した文字が一つも無ければこれも失敗します。

今回は、現在のページのURLから、”?”以降だけを何とかして抜き出したいため、SPLITメソッドを用います。
ですから型がSTRINGでないようなURL取得方法は今回は除外し、Location.Hrefで現在のURLを求め、”?”以降を抜き出してみたいと思います。
下のリンクで”?”以降をつけて「parmtest.html」呼び出します。


おわかりいただけましたでしょうか。
このように、呼び出し元でリンクのHtmlにURLで引数を与え、呼び出し先でこの引数を自分のURLから取り出すことで、引数でHtmlを制御することが可能です。

4.具体的な使い方

それは聞かないお約束(^^ゞ

実を言うと、前に何かの必要があってこういうことができないかなと考えたのですが、その時は私のスキル的に無理でした。
で、今になってなんとなく思いつきでたらたらスクリプトを書いてたらなんだかうまくいったので、「よっしゃぁ!」と思いきや、なんに使おうと思っていたのか忘れてまして、それでこんなことになったのです。

ブラウザ間の互換性を保ちつつ、呼び出し元の設定でリンク先を操作する方法をまとめました。
なお、ずっと上にもチラッと書きましたが、似たような目的を満たすために、Window.Openerプロパティを使って呼び出し先のウインドウから、呼び出し元のウインドウのプロパティや変数を参照する方法もあります。
どちらが手軽かは使う人のスキルも関係ありますが、どちらでも同じようなことは可能だと思います。
しかし、呼び出し元のウインドウが閉じていたり、または呼び出し元自身のウインドウを使ってページを切り替えると、Openerは使えないことになります。

というわけで、組み合わせて使うと、きっと幸せになれます。きっと。

はじめにも申し上げましたが、ご不明な点があればご連絡ください。
答えられる範囲内で答えます。


[HTML] 引数をつけてHTMLを呼び出す