起動するウィンドウのコンテンツ部分のサイズを下記で指定します。
横(px):+左右余白(スクロールバー(約30px)+左も同じだけ空ける(約30px))+外周と内部の間の16pxを加える。※注意:openwindowでは内部のサイズを指定をするので、外周と内部の間の16pxは上乗せしない。
縦(px):+境界線(1px)+タイトルバー(約30〜40px)+アドレスバー(約30〜40px)※注意:openwindowでは内部のサイズを指定をするので、外周と内部の間のタイトルバーとアドレスバーの高さは上乗せしない。
ここをクリックすると別ウィンドウが起動します。
scrollbars=yes, //スクロールバーはつける。
resizable=yes, //リサイズ可能
status=no, //ステータスバー非表示
location=yes, //アドレスバー表示
toolbar=no, //ツールバー非表示
menubar=no, //メニューバー非表示
width=入力値+左右余白(スクロールバー(約30px)+左も同じだけ空ける(約30px)), //左記内部の幅に外周と内部の間の16pxを加えた幅が、ディスプレイ(タスクバー除く)より大きかった場合は、ディスプレイ(タスクバー除く)のサイズにする。
height=入力値+境界線(1px), //左記内部の幅に外周と内部の間のタイトルバーとアドレスバー高さを加えた幅が、ディスプレイ(タスクバー除く)より大きかった場合は、ディスプレイ(タスクバー除く)のサイズにする。
left=計算, //ディスプレイ(タスクバー除く)縦横のpxから、ウィンドウがちょうど中央に来るように計算して配置する。
top=計算 //ディスプレイ(タスクバー除く)縦横のpxから、ウィンドウがちょうど中央に来るように計算して配置する。
→手持ちのIE11 OK。Firefox68 OK。Chrome83 OK。新Edge83 OK。Edgeレガシーは未実施。iPad
注意:onClickしたあとすぐ起動しないと、ブラウザにブロックされるので、起動するまでに重い処理をいれては行けません。ChromeはClick後3秒でポップアップブロックが動きます。
ブラウザの拡大縮小の考慮
・利用者がブラウザの拡大縮小の値を設定している場合がある。
Firefoxはブラウザの拡大縮小の倍率に応じてウィンドウの幅が変わる。(120%にしていると幅も120%で表示される。)
一方、Chromeはブラウザの倍率によってウィンドウの幅が変わらない。利用者がブラウザの倍率を縮小していると余白が多くなり、拡大しているとウィンドウ幅に収まらずスクロールバーが表示される。
なので、利用者がウィンドウサイズを変更できるようにリサイズ可能にしたほうが、利用者がストレスなく使える。
・文字が小さい場合など、開いたウィンドウで拡大縮小したい場合がある。
開いたウィンドウでキー制御を入れたい場合がありますが、その場合でも拡大縮小の手段を残しておきます。つまり、「Ctrl」(Macは「Command」)を押しながら、「+」または「-」または「0」及び「マウスホイール」による拡大縮小はできるようにしておきます。
ちなみに、JavaScriptで拡大縮小ボタンを配置する方法もあるのですが、画面が崩れたり、あるライブラリと相性が悪く操作ができなくなることがあります。安定した挙動が求められる業務系システムで利用するには適合性の見極めとそこそこのテストをする覚悟が必要になります。
一方、前者の方法は、ブラウザの機能なので安定している上に、各ブラウザで同じ操作方法で、しかも、それほど難しくないので、これをgif動画などでわかりやすく伝えることに注力したほうがコスパがよいです。
この拡大縮小を使った場合も、利用者はウィンドウの幅を変えたくなるので、リサイズは可能にしておきます。
window.openのパラメータの説明
params
新しいウィンドウの設定文字列。カンマで区切られた設定を含みます。params の中にスペースを入れてはいけません。例: width:200,height=100.
paramsの設定:
ポジション:
left/top (数値) – 画面上のウィンドウの左上隅の座標。新しいウィンドウを画面外に配置することはできない、という制限があります。
width/height (数値) – 新しいウィンドウの width と height 。 最小の width/height の制限があるので、, 見えないウィンドウを作成することはできません。
ウィンドウの機能:
menubar (yes/no) – 新しいウィンドウで、ブラウザのメニューを表示します/非表示にします。
toolbar (yes/no) – 新しいウィンドウで、ブラウザナビゲーション(戻る/進む/更新など)を表示します/非表示にします。
location (yes/no) – 新しいウィンドウで、URL フィールドを表示します/非表示にします。FF と IE はデフォルトでは隠すことは許可されていません。
status (yes/no) – ステータスバーを表示します/非表示にします。ほとんどのブラウザは強制的に表示させます。
resizable (yes/no) – 新しいウィンドウのリサイズを無効にします。非推奨です。
scrollbars (yes/no) – 新しいウィンドウのスクロールバーを無効にします。非推奨です。
あまりサポートされていないブラウザ固有の機能も数多くありますが、通常は使用されていません。例については、window.open in MDN を確認してみてください。
参考サイト
済
・ポップアップとウィンドウメソッド→ほとんどのブラウザは、onclick などユーザがトリガーしたイベントハンドラ外から呼ばれた場合には、ポップアップをブロックします。
・JavaScriptでウインドウを最前面にする
・ディスプレイサイズを取得して程よい幅と位置に表示することも追加する。
・JavaScriptで画面サイズを取得する
・JavaScriptでウインドウ開始位置を取得
・ディスプレイサイズに合わせてブラウザの新しいウィンドウを開く→最大のウィンドウ縦横の計算には、ウィンドウの外周の値(outerWidth、outerHeight)を使う。
→開いた結果、ウィンドウの外周の値(outerWidth、outerHeight)が、ディスプレイ(タスクバー除く)に収まらない場合は、開いた画面をリサイズする。
・JavaScriptでウインドウサイズを取得
以下、呼び出した別ウィンドウ内で実装する。
・ファンクションキーやバックスペースキー等での戻る、進むを無効化する制御を入れる。
・拡大縮小除くctlと使ったショートカットの抑止を行う。
・マウスの右クリックによるメニューを非表示にする。