D15 文字をクリックするとサブウィンドウが開き、ページを読み込む

D11では、HELPの中味をD11.HTMのページソース内へdocument.writeで記述しました。これは、1つのファイルで複数ページを処理できるので手軽ではありますが、でも、ページ内にいくつもHELPがある時は、ソースが繁雑で重たくなってしまいますし、また、ほかのページでも使い回したいときには、ファイルを別にいくつか作っておいて、文字をクリックしたときにはじめて呼び出すようにしたほうが便利です。

応用 : <a href=...>と</A>の間にここでは文字をはさんでいますが、たとえば、<img src=.....>というように画像をはさめば、その画像をクリックすることで、サブウインドウを開くようにできます。
参照 : function, 変数, window.open, focus(), onClick,

Sample

ゴールデンウィークの牛久大仏は1万平方メートルのお花畑に春のお花が一面に咲いて、それは見事です。柔らかなひだまりのなかでお弁当を広げると、こりゃも～幸せっ(^^)。って、感じです。なつかし露店で童心に帰って型抜きをやったり、大道芸を見たり、ひとしきりぼよよんとしたら、きりりと大仏3Fで写経 (う～む)なんかしてみるのも良いかも。で、子供がいたら何といっても、人気のリスとウサギの小動物公園が楽しいよっ(^0^)/。

*色の付いた文字をクリックしてください。

Source

ソース
(コピーしてお使いください)

<html>
<head>
<title></title>
<script language="JavaScript">
<!--

var HELPWin=null;//サブウインドウ
var HELPHref1="";//読み込むページ
function HelpWinOpen(HELPHref1,winname,W,H){
  HELPWin=window.open(HELPHref1,winname,'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width='+W+',height='+H+'');

  //サブウインドウが開いたとき前面へフォーカスする。NN3.0~
  if(navigator.appVersion.charAt(0)>=3){ HELPWin.focus() }
}

//-->
</script>
</head>
<body>
ゴールデンウィークの牛久大仏は1万平方メートルのお花畑に
<a href="javascript:function voi(){};voi()"
   onClick="
   HELPHref1='D15HELP1.HTM';//読み込むページ
   winname='HELP1'; //サブウインドウに名前を付ける
   W=150;             //サブウインドウの幅
   H=160;              //サブウインドウの高さ
   HelpWinOpen(HELPHref1,winname,W,H)">
  春のお花が一面に咲いて
</a>

、それは見事です。柔らかなひだまりのなかでお弁当を広げると、
こりゃも～幸せっ(^^)。って、感じです。

<a href="javascript:function voi(){};voi()"
   onClick="
   HELPHref1='D15HELP2.HTM';
   winname='HELP2';//もしHELP2と書くと花と同じウインドウに読み込まれます
   W=150;
   H=160;
   HelpWinOpen(HELPHref1,winname,W,H)">
   なつかし露店で童心に帰って
</a>

型抜きをやったり、大道芸を見たり、ひとしきりぼよよんとしたら、
きりりと

<a href="javascript:function voi(){};voi()"
   onClick="
   HELPHref1='D15HELP3.HTM';
   winname='HELP3';
   W=160;
   H=200;
   HelpWinOpen(HELPHref1,winname,W,H)">
   大仏3Fで写経
</a>

(う～む)なんかしてみるのも良いかも。で、
子供がいたら何といっても、人気の

<a href="javascript:function voi(){};voi()"
   onClick="
   HELPHref1='D15HELP4.HTM';
   winname='HELP4';
   W=140;
   H=160;
   HelpWinOpen(HELPHref1,winname,W,H)">
   リスとウサギの小動物公園
</a>

が楽しいよっ(^0^)/。

</body>
</html>

<!--D15HELP1.HTMの中味-->
<html><body bgcolor="#daa520" text="#ffffff">
<center> **お花畑<p><table border="3">
<td><img src="hanagw.gif" width="120"></td>
</table></center>></body></html>

<!--D15HELP2.HTMの中味-->
<html><body bgcolor="#6a5acd" text="#ffffff">
<center> ** 露店<p><table border="3">
<td><img src="dagashi.gif" width=120></td>
</table></center>></body></html>

<!--D15HELP3.HTMの中味-->
<html><body bgcolor="#008080" text="#ffffff">
<center> **写経<p><table border="3">
<td><img src="syakyo.gif" width="120"></td>
</table></center>></body></html>

<!--D15HELP4.HTMの中味-->
<html><body bgcolor="#ee82ee" text="#ffffff">
<center>**リスとウサギの<br> 小動物公園<p><table border="3">
<td><img src="usa.gif" width="60"></td>
</table></center></body></html>

window.openに関する説明はwindow.openをご覧ください。ちなみに、window.open(HELPHref1,winname,'toolbar=0...のHELPHref1の部分へたとえば、"http://game.gr.jp/"等と書くとそのページがサブウインドウへ読みこまれます
function HelpWinOpen(HELPHref1,winname,W,H){で、HELPHref1,winname,W,Hの4つの変数を受け取る事のできるHelpWinOpen()という名前の関数を作ります。これは、たとえばあとで、HelpWinOpen('HELP.HTM','HELP1',200,100)というふうに書くことで関数HelpWinOpenの中の各変数をHELPHref1='HELP.HTM',winname='HELP1',W=200,H=100に指定してサブウインドウを開くことができます
WinD15.document.write('xxx')はサブウインドウに'xxx'を書き出す(document.writeする)という意味です
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
ここでは、onClick="命令"でonClickのあとに書かれた命令を実行します
使用した画像 :
HANAGW.GIF DAGASHI.GIF SYAKYO.GIF USA.GIF

Contents

| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)

Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi