月間13,000PV達成! 収益は毎日発生中! ブログランキング上位! 記事は毎日更新中! ギランバレー症候群に関する情報を集めています

【JavaScript】複数ウィンドウ(子画面)をずらして表示する方法!

  • 2018.05.21
  • IT
【JavaScript】複数ウィンドウ(子画面)をずらして表示する方法!
Advertisement

 

クライアント側の処理を書く際に、ある画面から子画面を開くような処理を書くことがあるかと思います。

基本的には子画面を開く処理を何度も呼べば複数の子画面は出力できるわけですが、オプション設定をしないとウィンドウが被さるようになっているため、ぱっと見、複数出ているように見えません。

子画面を開く際は表示位置を指定できるのでオプション設定を使うことになるわけですが、詳しくはこれから説明していきます。

 

 

複数ウィンドウ(子画面)をずらして表示する方法

以下がソースコードになります。

 

 

解説

今回重要なポイントは子画面をずらして表示するということなので、画面を開く際に「left」の値を画面ごとに変更して表示します。

 

positionは引数として渡されてくる値で、この値は1、2のように数値を変えれば、画面の位置は自由にずらせます。

window.open(url, windowName, 'left=' + (position * 50) + option);

 

※今回のように第3引数にオプションを設定する場合、注意が必要です。
オプションは一つでも設定すると、すべての設定が解除されるので設定しなおす必要があります。

 

ちなみに、子画面を複数開く場合は「ウィンドウ名」を適宜変更してください。画面は一つの名前を保持しており、その名前を変えて表示しないと、新たな画面が生成されません。ご注意ください。

 

 

まとめ

子画面を開くことはあっても、複数画面を同時に開くことは少ないかもしれません。ユーザとしても決して使いやすいとは言えないですからね。

ただし、システムによっては複数画面を開くということもあると思うので、是非参考にしてみてください。

Travelerを知らないの?