Java Script Tips collection - Control Panel : step 2

この Tips集のようにブラウザのウィンドウを Frame で分割してレイアウトしたり「コントロールパネル」の場合のように別ウィンドウで表示したりできますが、どちらが良いかはページ構成もさることながら、ユーザの環境による要因もあります。

例えば、「画面が広いので別ウィンドウより Frame 分割の方が扱いやい」場合や、「沢山のウィンドウで同時に作業しながら見るので別ウィンドウにして、目次部分は縦長に、本文は横長にしたい」場合などです。

そこで、どちらの方式にするかをユーザに選択させたい場合も出てきます。

ということで、今度はウィンドウ方式とフレーム方式の切替えについてです。

<head>
    :
<script language="JavaScript"≶<!--
function unLoadWin(){} // ダミー関数
idxURL  = "contents.htm"; // パネルに表示するURL
idxName = "contents";     // パネルのウィンドウ名
idxPer  = "30";           // パネルの比率(横)
docURL  = "main.htm";     // 本文のURL
docName = "tips";         // 本文のウィンドウ名
document.write(
   '<frameset cols="'+idxPer+'%,*">'
  +'<frame src="'+idxURL+'" name="'+idxName+'">'
  +'<frame src="'+docURL+'" name="'+docName+'">'
  +'<\/frameset>');
);
// --></script>
    :
</head>

<head>
    :
<script language="JavaScript"><!--
idxURL    = "contents.htm"; // パネルに表示するURL
idxName   = "contents";     // パネルのウィンドウ名
docURL    = "main.htm";     // 本文のURL
docName   = "tips";         // 本文のウィンドウ名
                            // ウィンドウの装飾
features  = 'scrollbars,resizable,width=200,height=400';
menuWin   = window.open(idxURL,idxName,features);
function unLoadWin(){
  if(menuWin){
    if(!menuWin.closed) menuWin.close();
    menuWin = null;
  }
}
document.write(
   '<frameset rows="100%,*" border=0 framespacing=0 '
  +          'onUnload="unLoadWin()">'
  +  '<frame src="'+docURL+'" name="'+docName+'">'
  +'<\/frameset>
  );
// --></script>
    :
</head>

<head>
    :
<script language="JavaScript"><!--
docName = "tips" // 本文のウィンドウ名

// 表示フレームを切替える関数
function checkTarget(link,extdoc){
  if(window.opener && link.target=='_top'){
    if(extdoc){
      window.opener.location = link.href;
      window.close();
      return false; // 念のめた
    } else kl.target=docName;
  }
  return true;
}
// --></script>
<script language="JavaScript1.1"><!--
frameTop   = 'Default.htm';      // Frame方式の親
frameLabel = 'フレームメニュー'; // ボタンのタイトル
floatTop   = 'DefaultF.htm';     // ウィンドウ方式の親
floatLabel = 'フロートメニュー'; // ボタンのタイトル
idxName    = 'contents';         // パネルのフレーム名称

// メニュー方式を切替える関数
function toggleMenu(){
  if(opener) opener.location.replace(frameTop);
  else       parent.location.replace(floatTop);
}
// --></script>
    :
</head>
<body ...>
    :
<script language="JavaScript1.1"><!--
if(   navigator.appName!='Microsfot Internet Exporer'
   || parseFloat(navigator.appVersion)>=4.0){
  document.write(
     '<form>'
    +'<input type="button" '
    +  'value="'+(top.name==idxName?frameLabel:floatLabel)+'" '
    +  'onClick="toggleMenu();">'
    +'<\/form>
    );
}
// --></script>
    :
<a href="xxx.htm" target="tips"
   >普通のリンク</a><br>

<a href="yyy.htm" target="_top"
   onClick="checkTarget(this,false);"
   >全体に表示するリンク1</a><br>

<a href="zzz.htm" target="_top"
   onClick="checkTarget(this,true );"
   >全体に表示するリンク2</a><br>
    :
</body>

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

idxURL,idxName はメニュー側に表示する URL とウィンドウ名で、 docURL,docName はメイン側に表示する URL とウィンドウ名です。

また、idxPer,features はフレーム時の幅の比率と別ウィンドウの装飾で、必要に応じてサイズなど修正してください。

メニュー( contents.htm )ではframeTop, floatTopはそれぞれフレーム方式、ウィンドウ方式の親の URL で、 frameLabel,floatLabel方式切替えボタンに表示する文字列です。

また、リンクの部分は単なるサンプルなので作成するページに合わせた記述に変更してください。

リンク部分に指定する checkTarget関数の呼出形式は以下の通りです。

checkTarget(link,extdoc);

link   : リンクオブジェクト
extdoc : true  = 外部ページへのリンク
         false = サイト内のページへのリンク

extdoc を true にするとウィンドウ方式の表示中には表示しているウィンドウを閉じ、メインのフレームを解除して表示します。

切替ボタンは、この例の場合 FORM の BUTTON を使用していますが、切替にはtoggleMenu() を呼出せば良いだけなので、特に BUTTON を使用する必要はありません。

ページに関するTips

続コントロールパネル