JavaScript

JavaScriptで親画面に値を渡す小窓を作る方法

JavaScriptを触ってみました。
意外に派手な事が出来てうれしい感じです。

画面間のオブジェクトのやり取りにwindowオブジェクトを使う

Jsでは
windowオブジェクトというオブジェクトを用いて画面制御をするみたいです。
Script言語っぽく実体化とかはしなくて、

1行でポツっとオブジェクトが呼び出せます

親画面を呼び出す。

下記は子画面を呼び出すオブジェクト

parent.js
window.open(url, "サブ検索画面", "width=300,height=200,scrollbars=yes");

子画面から親画面を呼び出す。

子画面からも親画面が制御できます
window.openerと宣言するだけです。

child.js
    window.opener

もちろん親画面も子画面を制御できます。
window.open()の戻り値が子画面のwindowオブジェクトになっています

parant.js
sub_win = window.open(url, "サブ検索画面", "width=300,height=200,scrollbars=yes");

そんな訳で本題

値を渡す小窓を作りたいんですが、
2種類の小さいスクリプトを作るだけです。

1.親画面側
 子画面を呼び出すスクリプト

2.子画面
 親画面がいるか判定
 親画面に値を渡す
 画面を閉じる。

子画面の量が多い気がしますが気のせいです。実際書けば20行ないです。

とりま書いていきませう

スクリプトを書く

親画面側のスクリプト

parent.js
function disp(url){
 window.open(url, "サブ検索画面", "width=300,height=200,scrollbars=yes");
}

子画面側のスクリプト

child.js
var parantExistanceFlag = true;

function clickFire(){

    //ウィンドウオブジェクトが存在していない時警告してフラグをfalseに
    if ( !window.opener || !Object.keys(window.opener).length ) {
        window.alert('親画面が存在しません')
        parantExistanceFlag = false
    }

    //親画面に値を挿入
    if(parantExistanceFlag){
    window.opener.document.getElementById("code1").value
     = document.getElementById("searchCode").value
    }
     //ウィンドウを閉じる
    window.close();
}

これだけですね。

実際HTMLに組み込む

親画面ページ

MainScreen.html
<!DOCTYPE>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>親画面テストページ</title>
<script type ="text/javascript">
<!--
function disp(url){
   window.open(url, "サブ検索画面", "width=300,height=200,scrollbars=yes");
}
-->


</script>
</head>

<body>

<p>サブ画面からインプット</p>
<p>名前コード</p><br />
    <input id="code1" type="text" /><br />

    <input name="SearchScreen" type="button" value="検索画面起動" onClick='disp("/WebAquarium3.1/sub_win_testpage/subwindow")' />
</body>
</html>

子画面ページ

SubScreen.html
<!DOCTYPE>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<head>
<meta content="ja" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Group box
管理者コー</title>
<script type="text/javascript">
<!-- 
var parantExistanceFlag = true;

function clickFire(){

    //ウィンドウオブジェクトが存在していない時警告してフラグをfalseに
    if ( !window.opener || !Object.keys(window.opener).length ) {
        window.alert('親画面が存在しません')
        parantExistanceFlag = false
    }

    //親画面に値を挿入
    if(parantExistanceFlag){
    window.opener.document.getElementById("code1").value
     = document.getElementById("searchCode").value
    }

    window.close();
}

 -->
</script>
</head>

<body>

    <p>一般コードとかそういうの</p>
    <input id="searchCode" type="text" />

    <input name="Button" type="button" value="元画面に反映" onClick='clickFire()'/>
</body>
</html>

実際には.jspなのは気にしない
んじゃためしてみまひょ

れっつ実行

親画面のボタンを押す
image.png

子画面に値を入れる
image.png

親画面に値が反映されました
image.png

実際に使うのは業務用とかかな。
今時ポップアップを使うのはないと思うので、
実際にjQuery当たりのオシャレなライブラリを使う事になるかと。

業務用に使うならぜひ~ヾ(。>﹏<。)ノ゙