ポップアップ画面や複数のタブ画面で構成されたWEBアプリケーションでは、formのtarget指定で画面遷移をします。

でも、画面遷移させた先の画面をフォーカス（前面表示）させたり、フォーカスを外し（後面表示）たりしたいと思うことがありませんか？

今回はその方法について紹介します。

複数の画面を制御する構文例でよく紹介されているやり方①

function preview() {
    window.open("about:blank","preview","width=600,height=450,scrollbars=yes");
    document.input_form.target = "preview";
    document.input_form.submit();
}


<form action="preview.html" method="post" name="input_form" id="input_form">
　- 処理 -
</form>

この構文は、新しい画面を開いて、その画面にpostで画面遷移させるやり方です。

①scriptで新規画面を開きます。

②targetで新たな画面に付けた名前を指定します。

③submitします。

同様に以下のようにしておけば、一度開いた画面を制御できます。

var win_name;

// 子画面を開く処理
function preview() {
    win_name = window.open("about:blank","preview","width=600,height=450,scrollbars=yes");
    document.input_form.target = "preview";
    document.input_form.submit();
}

// 子画面を閉じる処理
function closeview(){
    if(win_name) win_name.close();
}


<form action="preview.html" method="post" name="input_form" id="input_form">
　- 処理 -
</form>

targetには、以下の特別な意味をもつ指定を使うと他画面を制御することができます。

複数の画面を制御する構文例でよく紹介されているやり方②

parent.html
<a href="javascript:window.open('child.html');return;">open child</a>

child.html
<a href="javascript:window.opener.focus();return;">activate parent</a>

この構文は、呼び出し元の親画面をフォーカスする方法です。

opener（呼び出し元）を指定すれば、子画面側から親画面にフォーカスを移すことができます。

でも、やりたいのは。。。画面の名前を指定して制御したい！

こんな時は、以下のやり方を試してみてください。

 <画面①>

var win_name;

// 子画面を開く処理
function preview() {
    window.name = "parentWin";  //自画面に名前を付けておく
    win_name = window.open("about:blank","childWin","width=600,height=450,scrollbars=yes");
    document.tochild_form.target = "preview";
    document.tochild_form.submit();
}


<form action="child.html" method="post" name="tochild_form"></form>

 <画面② : child.html>

// 親画面にアクションさせ、フォーカスを移す処理
function parentFocus() {
    var fm = document.toparent_form;
    var pwin = window.open("about:blank",fm.target);
    fm.submit();
    pwin.focus();
}

<form action="parent.html" target="parentWin" name="toparent_form" method="post"></form>