- コンテンツはフレームで2分割されている
- 左側にはサブフレームが、右側にはメインフレームが存在する
この状況で、「メインフレームが読み込まれるごとに、サブフレームの表示・非表示を切り替えたいんだけど」という要望があったので解決してみることにする。
ちなみにフレームのソースは以下の通り。framesetタグのcols属性によって、左側500pxをサブフレームに、残りの右側をメインフレームに割り当てるよう設定している。
<frameset cols="500,*" id="theFrame">
<frame src="left.html" id="subFrame" name="sub" noresize="noresize">
<frame src="right.html" id="mainFrame" name="main">
</frameset>
要望を「非表示にしたい＝見えてなければいい」と解釈していいのであれば、メインフレーム(right.html)が読み込まれるのをトリガに上記cols属性を"0,*"などに動的に変更すればよさそうだ。
ググってみたらあっさりとフレームの横幅を変更する方法が見つかった。これはframesetタグにname属性を与えて変更するTipsだけど、W3C HTML4.01 Frameset の勧告文書によればframesetタグにはname属性が定義されていないので、（動くんだろうけど）残念ながらこのサンプルは使えない。ただしid属性の使用はOKなので、getElementById()でframesetオブジェクトを取得できさえすればなんとかなりそうだ。
で、試行錯誤の挙句こんな感じになりました。
■javascript
function showSubFrame(show) {
id = 'theFrame';if (show) {
cols = '500,*';
} else {
cols = '0,*';
}frame = window.top.document.getElementById(id); ←※ココに注目
if (!frame) {
alert('あぼーん');
return;
}
frame.cols = cols;
}■サブフレームを表示したい場合のright.html
<body onload="showSubFrame(true)">
■サブフレームを非表示にしたい場合のright.html
<body onload="showSubFrame(false)">
window.topを使って最上位のframeオブジェクトに対してgetElementById()するのが今回のキモです。単にgetElementById()を実行してもメインフレーム内のオブジェクトしか検索対象にならず、欲しい結果が得られないので注意。応用すれば、横幅だけでなく縦幅（rows）も変更可能だと思います。
ちなみにFrameオブジェクト(window.parent / window.topとか)は、windowオブジェクトにあるプロパティやメソッドの多くが使えるらしいです。興味がある人は調べてみてください。
つか今時Frame使わせんなYO! >> 顧客
なんて言えない…
ググるのパーソナルトップをイメージしている悪寒。
alert('あぼーん');
この部分をそのままで納品したらネ申。
実装方法は大きく異なるけど、言われてみれば確かに似てるかも！
実際はgetElementById()の箇所で(もそっとだけ)凝ったことをしましたが、なにぶんDOMはブラウザ依存が大きすぎるのでネ申にはなれません…