HPの小技

ちょっと仕事関連でＨＰを作成した。
CSSをページの枠組み用と装飾用の２つに分けたり、SEO対策で新規ページがどのくらいで上位に顔を出すのか実験してみたり、新しい試みをしている。

ページの作成を簡略化するため、ヘッダー部分、ページ遷移させるナビゲータ部分、コンテンツ表示部分にiFrameで分割したベースファイルを枠組みとして作成した。コンテンツはナビゲータ部分でクリックされたらページ書き換え、という方法を取ってみた。
ただ、検索エンジンはコンテンツのファイルにもリンクを作り、そのリンクを開くと「コンテンツのファイルだけ開く」という状態になり、他のページを見ることができなくなるケースをよく見かけるが、それだとちょっとおマヌケなので、何とかできないか、と検討した。
要するに、コンテンツのファイルを開こうとすると、それを表示するための枠組みであるベースファイルを表示し、更に該当するコンテンツを流し込めればよい訳だ。
しかし、Googleなどで検索してもなかなかいいやり方が見つからない。

情報を拾い集め、それをJavaScriptで組んでみて実現できるか試してみた。
まず、コンテンツファイルが開かれるとhref.locationでベースファイルを表示するようにする。トップレベルに表示された時のみ処理を動かすようにしておけば問題なくクリア。
問題は、href.location で表示したファイルに「さっきどのファイルが開いていたか」の情報をどのように渡せばよいか、であった。よく知らなかったのだが、href.location で、URLにパラメータを付加できるとの情報があったので、それを利用することで難なくクリア。

かくして、コンテンツのファイルが開かれると、ベースのファイルを読み込み、そのコンテンツ表示部分に該当コンテンツを表示するということが可能になった。

結構面倒くさそうであったが、意外と簡単であった。JavaScriptのオブジェクトモデルと、HTMLの仕様について少しだけ理解が深まった気がする。