Step.32 - ポップアップウィンドウ(小窓)でＢＧＭを流すその２

ホームページ読みこみ時に、別ウィンドウを作ってそこで BGMを流します。
訪問者が聞きたくなければ、閉じれば良いだけです。
ホームページを移動すると、別ウィンドウも閉じます。

Step テーマ
● onload ページ読み込み時の処理
● onunload ページ移動時の処理
● open ウィンドウを開く
● closed ウィンドウが閉じているか調べる
● close 開いたウィンドウを閉じる

実行例

ポップアップウィンドウが実行結果です。

※ ポップアップブロックしているとウィンドウは出ません。。

リスト -BGMウィンドウ例-

<html>
<head>
<title>BGM WINDOW</title>
</head>
<body bgcolor="#FFC0CB">
<p align="center">
Tatsuya's Home Page<br>
イヌでもわかるJavaScript講座<br>
<br>
♪ 今週のBGM ♪<br>
「日曜画家」<br>
作曲 K.K.<br>
</p>
<form><p align="center">
<input type="button" value="閉じる" onclick="window.close()">
</p></form>
<p align="center">
<embed src="sunday.mid" hidden="false" loop="true" autostart="true">
</p>
</body>
</html>

サンプルだけの HTMLはこちらへ

説明

前回の Step は、訪問者がボタンを押して、BGMウィンドウを開きましたが、今回はページに入るとウィンドウを開いてBGMを流します。
訪問者が聞きたくなければ、閉じるボタンを押してもらう形です。

また、違うページへ移動すると、ウィンドウを閉じるようにしています。

今回は、<BODY>タグに JavaScript を埋め込んで、ポップアップウィンドウのオープン、クローズをやってみます。

<body onload="myBGMon()" onunload="myBGMoff()">
onload は、ページの表示が終わった時に、指定の関数や命令を実行します。
onunload は、ページを移動する時に、指定の関数や命令を実行します。

onload 時に、複数の処理をしたい場合は、
onload="myFunc1();myFunc2();myFunc3();"
のように並べて記述すれば、順に処理させることができます。

function myBGMon(){
myWinHandle=window.open("bgmwin.htm", "bgm", "width=360,height=250" );
}
window.open は、オープンしたウィンドウ情報を戻します。これを myWinHandle に退避させておきます。

function myBGMoff(){
if ( myWinHandle.closed == false ) myWinHandle.close();
}
myWinHandle.close() で、そのウィンドウを終了させます。

しかし、訪問者が小窓を既に終了させている可能性があります。
そこで、myWinHandle.closed で、開いたウィンドウがあるかどうか調べます。
myWinHandle.closed が、false であれば、まだ、そのウィンドウはあります。true であれば、そのウィンドウは終了して(閉じて) います。

参考ステップ
Step.13 リンク先を新しいウィンドウで表示してみましょう　※ window.open
Step.31 ポップアップウィンドウを開いて BGMを流してみましょうその1　
Step.63 ポップアップウィンドウを開いて BGMを流してみましょうその3　
Step.81 アクセス毎にＢＧＭを変えてみましょう　

MIDIデータは、K.K.さんからお借りしました。Thanks.
"sunday.mid" Copyright (C) K.K. All rights reserved.
Intermezzo http://www1.linkclub.or.jp/~medaka34/

▲TOP

実行例

リスト

リスト -BGMウィンドウ 例-

説明

リスト -BGMウィンドウ例-