ページに関するTips


・フレーム連動ページ

NN2Unknown NN3OK NN4OK MozillaBug IE3Unknown IE4OK

フレーム構成のページにおいて、 1操作で複数のフレームの内容を変えたいという状況は意外と多いような気がします。

この要求の最も簡単な実現方法はリンク( Aタグ )の onClick イベントで必要なフレーム分だけ 該当フレームの location を変更する方法ではないでしょうか。

然し目的に依っては、 この手法で1操作で複数のフレームを変えることができても、 ブラウザの「戻る」ボタンで1フレームづつ戻るため、この対策に苦慮する場合もあり、 今や隠れた FAQ と化しているようです。

ここで紹介する方法は、技術的にはとても単純ですが、 リンクの操作では1フレームの変更だけを行い、代わりに表示されたフレームの onLoad イベントを利用するものです。
#> 実はこの手法はこの Tips集でも色々な場所で使用しているのです。 f(^^;

フレームの親
<script language="JavaScript"><!--
loadedTitle = ''; // 表示中の連動ページの URL

function loadTitlePage(url){
  if(loadedTitle!=url){
    frames.title.location=url;
    loadedTitle=url;
  }
}
// --></script>
<script language="JavaScript1.1"><!--
function loadTitlePage(url){
  if(loadedTitle!=url){
    frames.title.location.replace(url);
    loadedTitle=url;
  }
}
// --></script>
    :
</head><frameset rows="30%,*">
  <!-- 連動表示するフレーム -->
  <frame name="title" src="title1.htm">
  <!-- その他のフレーム -->
  <frameset cols="30%,*">
    <frame name="contents" src="contents.htm">
    <frame name="main"     src="main1.htm">
  </frameset>
</frameset>
操作で表示されるページ
<script language="JavaScript"><!--
function loadPage(url){
  if(parent.loadTitlePage) parent.loadTitlePage(url);
}
// --></script>
    :
</head>
<body onLoad="loadPage('title1.htm');">
    :

この文字の部分は必要に応じて修正します。

フレームの親では連動するフレームに付けた名称( name属性 )を指定し、 フレームの子では連動するページの URL を指定します。

また、連動するフレームが複数ある場合には loadTitlePage, loadPage の引数を 増やして、同様の処理をする必要がありますし、 フレーム構成がこのサンプルと異なる場合にも多少の修正が必要になります。


使用例

サンプルはこちら


注意事項

NN2 IE3
loadPage 関数内で使用している replace メソッドは NN3( JavaScript1.1 )以降で 実装された関数なので、それより古いブラウザでは、 やはり「戻る」ボタンで1ページづつ戻ることになります。
IE4

Mac版 IE4.5 ではこのスクリプトは上手く動作しません。

これは、Mac版 IE4.5 のページキャッシュ方式が通常の方式とは異なるために 「戻る」操作で onLoad イベントが呼び出されないためと思われますが、 もし、Mac版 IE4.5 でも動作するようにするなら、気の進まない方法ですが、 「操作で表示されるページ」のスクリプトを以下のようにすると動作します。

<script language="JavaScript"><!--
loadTitle = 'title1.htm'; // 連動するページの 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 loadPage(){
  if(parent.loadTitlePage){
    Mac4_5CacheBugFix('loadPage()');
    parent.loadTitlePage(loadTitle);
  }
}
// --></script>
    :
</head>
<body ... onLoad="loadPage();">
    :

上の interval は必要に応じて適当に調整します。

Copyright(c) 1998 - 2001 ShinSoft. All rights reserved.