BODY属性連動ページBODY属性連動ページ  |
  |
 |
 |
 |
 |
フレーム構成を採るページはこの Tips集を含めて数多くあります。
このようなページ構成では、ページの属性（ BODYタグの配色等 ）
は統一することが多いようです。
当然、統一しなければならないわけではありません。
が、もし統一しないとすれば表示されたページと他のフレームのページで
統一感が失われてしまう場合もあります。
このような場合には、同じページで配色など異なるページを用意しても良いのですが、
ページのメンテナンスを考えるとダイナミックに変更した方が良いのではないでしょうか？
あるフレームを更新した場合に、他のフレームの配色を同じにするのであれば、 JavaScript で比較的簡単に実現することができます。 もちろん、 JavaScript をサポートしていないブラウザでは 統一感のないページ構成で我慢してもらうことになりますが...
以下は他のフレームの配色を同じにする方法です。
Frame の親( SetAttr.htm )
<head>
:
<script language="JavaScript"><!--
av = parseInt(navigator.appVersion);
useReload = (av>3)||(navigator.appName=='Netscape' && av>2);
wallpaper = ''; // 背景の設定
colors = ''; // 配色の設定
function setAttr(backimage){
var maindoc = window.doc.document;
var wp=(backimage?(' background="'+backimage+'"'):'');
var c = ' bgColor="'+maindoc.bgColor +'"'
+ ' text="' +maindoc.fgColor +'"'
+ ' link="' +maindoc.linkColor +'"'
+ ' alink="' +maindoc.alinkColor+'"'
+ ' vlink="' +maindoc.vlinkColor+'"';
var chg=false;
if(wp!=wallpaper){ wallpaper=wp; chg=true; }
if(c !=colors ){ colors =c; chg=true; }
if(chg){
// 対象のフレームが複数ある場合には、
// 必要数分だけ reload/go を追加する
var cntdoc = window.contents;
if(useReload){
cntdoc.location.reload();
} else{
cntdoc.history.go(0);
}
}
}
// --></script>
</head>
<frameset cols="30%,*" border=0 frameborder=no framespacing=0>
<frame name="contents" src="SetAttrI.htm">
<frame name="doc" src="SetAttr1.htm">
</frameset>
</html>
属性が定義されている側( SetAttr1.htm )
<head>
:
<script language="JavaScript"><!--
function setAttr(){} // dummy function
function setBg(img){ if(parent.setAttr) parent.setAttr(img); }
// --></script>
:
</head>
<body ... onLoad="setBg('');">
:
属性が変化する側( SetAttrI.htm )
:
</head>
<script language="JavaScript"><!--
document.write(
window.name=='contents'?
('<body'+parent.colors+parent.wallpaper+'>'):
('<body>')
);
// --></script>
<noscript><body></noscript>
:
この文字の部分は必要に応じて修正します。
docは属性の定義側、
contentsは属性を引き継ぐ側のフレーム名で、
フレームに表示する HTML の URL とともに、必要に応じて修正します。
属性の定義側で onLoad イベントに定義する setBg関数の呼出形式は以下の通りです。
setBg(imgURL) imgURL : 背景画像の URL または ''
使用例
サンプルはこちら。
注意事項
interval = 1000; // 監視間隔( msec ) tid = null; // タイマ識別子 function Mac4_5CacheBugFix(scr){ if( document.all && !document.getElementById && navigator.userAgent.indexOf('Mac')!=-1) tid = setTimeout(scr,interval); } function setBg(img){ if(parent.setAttr){ Mac4_5CacheBugFix('setBg("'+img+'")'); parent.setAttr(img); } } <body ... onLoad="setBg('');">