あるwebアプリを作りたくて、久々にJavaScriptのリハビリ。
親ウィンドウから子ウィンドウを開いたり、子ウィンドウの関数を実行したり、他のウィンドウに隠れた子ウィンドウを前面に出したり、閉じたりを試してみた。
全コード
親ウィンドウのHTML(test_window-01.html)
<html>
<head>
<meta charset="UTF-8">
<title>親ウィンドウからサブウィンドウの関数を呼び出す</title>
<script Language="JavaScript">
var subWin = null;
function myFunc1() { // サブウィンドウを生成
subWin = window.open("test_window-sub-01.html","sub window","width=800,height=600");
}
function myFunc2() { // サブウィンドウにオブジェクトを追加
if(check_win(subWin) == true){
subWin.myFunc(subWin);
}
}
function myFunc3() { // サブウィンドウにフォーカス
if(check_win(subWin) == true){
subWin.focus();
}
}
function myFunc4() { // サブウィンドウを閉じる
if(check_win(subWin) == true){
subWin.close();
}
}
function check_win(win){ // サブウィンドウの存在チェック
if (win == null) {
document.body.insertAdjacentHTML('beforeend', 'サブウィンドウがありません<br>');
return false;
}
else if (win.closed) {
document.body.insertAdjacentHTML('beforeend', 'サブウィンドウは閉じられています<br>');
return false;
}
else{
return true;
}
}
</script>
</head>
<body>
<button type="button" onclick="myFunc1()">サブウィンドウ生成</button><br>
<button type="button" onclick="myFunc2()">サブウィンドウにオブジェクトを追加</button><br>
<button type="button" onclick="myFunc3()">サブウィンドウにフォーカス(前面へ)</button><br>
<button type="button" onclick="myFunc4()">サブウィンドウを閉じる</button><br>
</body>
</html>
子ウィンドウのHTML(test_window-sub-01.html)
<html>
<head>
<meta charset="UTF-8">
<title>親ウィンドウからサブウィンドウの関数を呼び出す</title>
<script Language="JavaScript">
function myFunc()
{
document.body.insertAdjacentHTML('beforeend', '<div>clicked !!! </div>');
}
</script>
</head>
<body>
サブウィンドウ
</body>
</html>
子ウィンドウを開く
子ウィンドウを開く関数はwindow.open()で、サンプルの「サブウィンドウ生成」ボタンを押すと下記が実行されてウィンドウが開く。
subWin = window.open("test_window-sub-01.html","sub window","width=800,height=600");
子ウィンドウの存在チェック
子ウィンドウの関数を呼んだりする際に、子ウィンドウが存在するか確認する必要があるケースがあるので、子ウィンドウが生成済みか、閉じられてしまったかをcheck_win()でチェック。子ウィンドウが生成されているか否かは、子ウィンドウを保持するオブジェクト(subWin)が初期値(null)であるか否かで確認するようにしてみた。開いたウィンドウが閉じられているかはwindow.closed()で確認できる。
function check_win(win){ // サブウィンドウの存在チェック
if (win == null) {
document.body.insertAdjacentHTML('beforeend', 'サブウィンドウがありません<br>');
return false;
}
else if (win.closed) {
document.body.insertAdjacentHTML('beforeend', 'サブウィンドウは閉じられています<br>');
return false;
}
else{
return true;
}
}
子ウィンドウの関数を実行する
「サブウィンドウにオブジェクトを追加」ボタンを押すと、子ウィンドウのmyFunc()を呼び出す。呼び出し方は子ウィンドウのオブジェクト(subWin).関数名で呼び出せる。
function myFunc2() { // サブウィンドウにオブジェクトを追加
if(check_win(subWin) == true){
subWin.myFunc(subWin);
}
}
子ウィンドウを前面に呼び戻す
開いた子ウィンドウが他のアプリの裏に隠れたときに、いちいちOSのウィンドウ操作で前に出すのは面倒なので、親ウィンドウから呼び戻せるようにしたくて「サブウィンドウにフォーカス(前面へ)」ボタンで作ってみた。前に呼び出すにはフォーカスすれば良く、window.focus()でできる。
function myFunc3() { // サブウィンドウにフォーカス
if(check_win(subWin) == true){
subWin.focus();
}
}
子ウィンドウを閉じる
子ウィンドウを閉じるにはwindow.close()を実行すれば良い。「サブウィンドウを閉じる」をクリックすると実行するようにした。
function myFunc4() { // サブウィンドウを閉じる
if(check_win(subWin) == true){
subWin.close();
}
}
気が向いたら感想をお願いします。(ログイン不要、ボタンを押すだけです)
