サブウインドウ内にあるボタンをクリックすると元のウインドウが手前に出てきて(focusして)指定したページを読み込みます。Closeボタンも付いてます。
応用 :
location.href="URL"の読み込むページを取り替えて、オリジナルメニューウインドウを作りましょう。項目数が多い時はwindow.open()の中のwidth=240,height=260の数字をふやすとサブウインドウの幅と高さが大きくなります。 ウインドウについて詳しくはwindow.openの参照をご覧ください。
参照 : function, 変数, window.open, opener, onerror, document.write(), location.href, history.go(), document.close(), onClick,
<html>
<head>
<title></title>
</head>
<script language="JavaScript">
<!--
//サブウインドウオープン
function WinOpen(){
WinF03=window.open('','WinNameF03','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=240,height=260');
var htm = '<scr'+'ipt>'
htm += ' function is_opener() {'
htm += ' var ua = navigator.userAgent;'
htm += ' if(!!window.opener)'
htm += ' if( ua.indexOf("MSIE 4")!=-1 && ua.indexOf("Win")!=-1) '
htm += ' return !window.opener.closed;'
htm += ' else return typeof window.opener.document == "object";'
htm += ' else return false;'
htm += ' }'
htm += '</scr'+'ipt>'
htm += '<body bgcolor="#556B2F">'
htm += '<table border=4 width=18%><tr><td>'
htm += '</td></tr></table>'
htm += '<font size=5 face="Osaka,ＭＳ Ｐゴシック" color="gold">'
htm += '目次</font>'
htm += '<hr>1thウインドウに.....<p>'
//目次
htm += '<pre>'
htm += '<form>'
htm += '<input type="button" value="F01" '
htm += ' onClick="if(is_opener())'
htm += ' opener.location.href=\'SIMPLF01.HTM\'">'
htm += '別のページを読み込む方法<br>'
htm += '<input type="button" value="F02" '
htm += ' onClick="if(is_opener())'
htm += ' opener.location.href=\'SIMPLF02.HTM\'">'
htm += '背景色を変更する方法<br>'
htm += '<input type="button" value="F03" '
htm += ' onClick="if(is_opener())'
htm += ' opener.location.href=\'SIMPLF03.HTM\'">'
htm += '目次を作る方法<br>'
htm += '</form>'
htm += '</pre>'
//目次ここまで
htm += '<center>'
htm += '<table border=1 width=100%><tr><td>'
htm += '</td></tr></table>'
//サブウインドウを閉じる
htm += '<form>'
htm += 'この目次を閉じます'.fontcolor("E9967A")
htm += '<br>'
htm += '<input type="button" value=" Close " '
htm += ' onClick="self.close()">'
htm += '</form>'
htm += '</center>'
//htmlの書き出しと文書クローズ
WinF03.document.write(htm)
WinF03.document.close();
//NN3.0~ならサブウィンドウが開くときフォーカス(手前に)する。
if(navigator.appVersion.charAt(0)>=3){WinF03.focus()};
}
//-->
</script>
<body>
<form>
<input type="button" value=" 目次 "
onClick="WinOpen()"><br>
</form>
</body>
</html>
window.openに関する説明はwindow.openをご覧くださいvar htm = 'HTML1'でサブウインドウ内へ書き出すためのHTMLを変数var htmへ格納しています。次の htm += 'HTML2'はHTML1の後ろへ続けてHTML2を追加します
function is_opener(){...}は元ウインドウが閉じているか開いているかを調べる関数です。閉じていればfalse、開いていればtrueを返します
参考:http://game.gr.jp/js-ml/samples/200102/openerTest.htmlif(is_opener()){命令}はサブウインドウを開いた元ウインドウが閉じていなければ続く命令を実行します
opener.location.href="URL"で元ウインドウ(opener)へ指定した"URL"を読み込みます
self.close()Win版IE4/5のエラーを避けるためサブウインドウを閉じます。NNやIEのWin版以外ならなくても大丈夫です
'この目次を閉じます'.fontcolor("E9967A")は'この目次を閉じます'という文字列を"E9967A"の色にします
WinF03.document.write(htm)でサブウインドウWinF03へ変数var htmに格納したHTMLを書き出ています
WinF03.document.close()はサブウインドウWinF03内の文字などの書き出しを終了するという意味です。これを忘れると文字が欠けることがあります
onClick="命令文"でクリックしたら"命令文"を実行するという意味です
ここでは、たとえばonClick="WinOpen()"で関数WinOpen()のなかに書かれた命令を実行します
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)