日々更新中です!

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

  • URLをコピーしました!
悩んでいる男の子

JavaScriptで複数ウィンドウをずらして表示したいんだけど、やり方が分からないんだよね。。

こんな悩みを解決します。

  • 本記事の内容
  • JavaScriptで複数ウィンドウ(子画面)をずらして表示する方法
  • 本記事の執筆者
プロフィール
いずみん(どこの写真だよ)
  • 元エンジニア(歴7年)、資格保有数約20個(IT系以外も含む)
  • 物販月利50万円⇒脱サラ
  • 物販、システム開発、アフィリエイト、プログラミング、投資をやっています。
  • 物販は彼女と楽しみながらやっています!

今回は、JavaScriptで複数ウィンドウ(子画面)をずらして表示する方法を解説します。

いずみん

すぐ読み終わるので、是非最後まで読んでみてください!

目次

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

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

/**
 * 複数ウィンドウ(子画面)をずらして表示する
 * ※本関数を何度も呼び出して使用する
 *  その際、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のように数値を変えれば画面の位置を自由にずらせます。

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

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

ちなみに、子画面を複数開く場合は「ウィンドウ名」を適宜変更してください。

画面は一つの名前を保持しており、その名前を変えて表示しないと新たな画面が生成できません。

まとめ

今回は、JavaScriptで複数ウィンドウ(子画面)をずらして表示する方法を解説しました。

分かってしまえば意外と簡単でしたね。

ではまた!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

いずみんのアバター いずみん 自由大好きおじ

自由大好きおじ | 物販月利50万達成⇨脱サラ | 物販(アパレルせどり)・アフィリエイト・プログラミング・投資に関する情報を発信中 | 元エンジニア | 保有資格約20個

コメント

コメントする

目次
閉じる