フレームを使って何が悪い!

 
Web Tips.
Booskanium's
Booskanium's Web Tips.

フレームを使っちゃ駄目と説く理由を何度読んでも納得できない落書き人です。
ブラウザが上位互換としてframesetとframeを捨てることは無いと思われますので、廃止要素だろうが使い続けるという選択肢もあります。
HTML5に移行したからには、iframeで如何に代用できるかという無駄な努力もしてみました。これは廃止理由の論法に納得できない落書き人の依怙地ですので、この備忘録は笑ってやってください。:D

フレームセットは良かったなぁ

メニューとコンテンツで構成するページが簡単に作成できてよかったなぁ。
フレームの境も自由に動かせて、フレームセットの構成しだいでユーザーにとっても使いやすいページになります。
そしてフレームセットが廃止されて、いまはPHPやSSIで動的にメニューを埋め込んだり、JavaScriptで動的にロードしたり、各ページに重複記述は仕方ないと割り切ったりで、結局は難しくなっており、なんか違うなと感じています。
SEO対策が云々、これはコマーシャルサイトはそうかもしれませんが、URLの工夫次第で問題解決できそうです。
ページのシンプルさですが、書き手からするとフレームセットの方がシンプルです。

でも、やっぱり廃止要素を使うのはちょっと・・・

ところで、この備忘録の各ページはframeset風ですが単特ページの集合です。
左側のメニュー部分は共通部分として、サーバー側でインクルードさせて重複記述を防いでいます。メニュー用の現在位置表示はURLパス(フォルダ部分)をJavaScriptで判定しています。
この手法ならレスポンシブ対応も容易です。

フレーム利用でのナビゲーション改善

フレームセットの欠点であるナビゲーション性の悪さ(*1)とは
・ブラウザのタブ見出しとの不整合
・ブラウザのhistoryに反映されない
・ブックマークで具合が悪い
JavaScriptで改善できますが、かなり面倒。

ブラウザのタブ見出しとの不整合

これは単純で「document.title」に親windowと子windowの組み合わせに対する、適切な見出しをセットすることで改善できる。

ブラウザのhistoryに反映されない

これでブラウザも戻る・進むの機能と、アドレス欄のURL表示を親windowと子windowの組み合わせに連動させます。 連動させるURLはハッシュアンカーやURL引数を用いて、ロード時にその組み合わせを再現させます。
これでブックマークされても、問題なく目的のページ(親windowと子windowの組み合わせ)が開かれるようにできます。

ブックマークで具合が悪い

上記のhistory対応でURLを動的に変えれば改善できる。

親windowにwindow高さの変更を反映

iframeが使いにくい一つに、子windowページの高さが、親windowのiframe要素の高さと連動しないことがあります。 ここの落書き人はJavaScriptで汎用化して連動させています。「/js/__resizeChild.js」を参照してください。

サイト内リンクについて

_selfや_topの使いわけ。

framesetのframe境界線を再現
フレーム内単独ページが開かれたら

・・・・・あとで。