クライアント側の処理を書く際に、ある画面から子画面を開くような処理を書くことがあるかと思います。
基本的には子画面を開く処理を何度も呼べば複数の子画面は出力できるわけですが、オプション設定をしないとウィンドウが被さるようになっているため、ぱっと見、複数出ているように見えません。
子画面を開く際は表示位置を指定できるのでオプション設定を使うことになるわけですが、詳しくはこれから説明していきます。
複数ウィンドウ(子画面)をずらして表示する方法
以下がソースコードになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/** * 複数ウィンドウ(子画面)をずらして表示する * ※本関数を何度も呼び出して使用する * その際、positionに1, 2などの連番を振ることでずらすことができる * @param param URL * @param windowName ウィンドウ名 * @param position ポジション * @param e 要素オブジェクト * @return - なし */ function openSubWindow(url, windowName, position, e) { //遷移先URL var url = url; //オプション設定 //少なくとも一つのオプションを設定するとすべてのオプションがリセットされるため再設定する var option = 'menubar=no,location=no,resizable=yes,scrollbars=yes,status=no,width=1200,height=600'; //子画面表示 //「指定された数字×50」分、左にずらして表示する window.open(url, windowName, 'left=' + (position * 50) + option); } |
解説
今回重要なポイントは子画面をずらして表示するということなので、画面を開く際に「left」の値を画面ごとに変更して表示します。
positionは引数として渡されてくる値で、この値は1、2のように数値を変えれば、画面の位置は自由にずらせます。
|
1 |
window.open(url, windowName, 'left=' + (position * 50) + option); |
※今回のように第3引数にオプションを設定する場合、注意が必要です。
オプションは一つでも設定すると、すべての設定が解除されるので設定しなおす必要があります。
ちなみに、子画面を複数開く場合は「ウィンドウ名」を適宜変更してください。画面は一つの名前を保持しており、その名前を変えて表示しないと、新たな画面が生成されません。ご注意ください。
まとめ
子画面を開くことはあっても、複数画面を同時に開くことは少ないかもしれません。ユーザとしても決して使いやすいとは言えないですからね。
ただし、システムによっては複数画面を開くということもあると思うので、是非参考にしてみてください。
