CSS連動ページ

◆解説

これはフレーム間でスタイルシートを同期して使用する例で、「BODY属性連動ページ」に「外部CSSを切り替える」を適用したものです

スクリプトはフレーム構成のため、フレームの親とページの切り替えで変化する同期対象の子フレーム、ページ操作対象の同期元の子フレームの３つに分かれます

■JavaScript( フレームの親 )
この文字はカスタマイズ項目です

content_name = 'menu';     // 同期対象のフレーム名
current_css  = 'css1.css'; // CSS の初期値
load_menu    = 0;          // 同期対象のフレームの状態
function load_css(src){
  if(current_css == src) return;
  current_css = src;
  if(load_menu){
    if(window.frames[content_name].chg_css){
      window.frames[content_name].chg_css();
    }
  }
}

■前提とする HTML要素

<frameset cols="30%,*">
  <frame src="menu.htm"  name="menu">
  <frame src="main1.htm" name="main">
</frameset>

この例では "main"フレームの内容が変わると "menu"フレームのスタイルが代わります

同期対象( "menu"フレーム )のスクリプトは以下のものです

■JavaScript( 同期対象のフレーム:menu.htm )
この文字はカスタマイズ項目です

css_id      = 'ccss';     // スタイルシートの ID名
default_css = 'css1.css'; // スタイルシートの初期値
current_css = 'css1.css'; // 現在適用中のスタイルシート
function chg_css(){
  var win = window.top;
  if(!win.current_css) win.current_css = default_css;
  if(   win.current_css != current_css
     && replace_css(css_id,win.current_css)){
      current_css = win.current_css;
  }
}
function css_init()   { window.top.load_menu = 1; chg_css(); }
function css_closure(){ window.top.load_menu = 0; }

*1 replace_css 関数のスクリプトは「外部CSSを切り替える」で紹介したスクリプトなのでここでは記述していません
使用する際にはこのスクリプトも必要です

*2 current_css 変数は、このページを単独で表示された場合にスタイルを切り替えないための目的を兼ねています

■前提とする HTML要素

<link id="ccss" rel="stylesheet" href="css1.css" type="text/css">
    :
<body onload="css_init();" onunload="css_closure();">

同期元ページ( "main"フレーム )のスクリプトは以下のものです

■JavaScript( 同期元のフレーム:main.htm )
この文字はカスタマイズ項目です

function load_css(src){} // ダミー関数

*3 ここで記述している load_css 関数はやはり、このページを単独で表示された場合にエラーにしないための記述で、実際には使用されません

■前提とする HTML要素

<link rel="stylesheet" href="css1.css" type="text/css">
    :
<body onload="window.top.load_css('css1.css');">

◆注意とヒント

●このスクリプトは IE5.5, IE6, Mozilla1.4( 以上 Windows ), Safari1.0( 以上 Mac 10.2 ), Konqueror3.1( 以上 RedHat 9 ) で確認しています
これより古いバージョンのブラウザでは正常に動作しないかもしれません
詳しくは「外部CSSを切り替える」の「注意とヒント」を参照してください

●NN4 で linkタグに id属性を付けると無視されるのがカッコ悪いと言う人は linkタグの前に初期値で指定しているスタイルシートの中身を styleタグで展開しておく手もあります
#> ま、それでも連動するワケではありませんが...

● "main"フレーム側で、いちいち onloadイベントに記述する内容を指定するのが面倒と言う人は linkタグに id や class属性を指定して getElementById などでhref属性の内容を取得する手や表示時に linkタグを document.writeする手もありますが...
#> 注意と配慮が必要です f(^^;