サブウィンドウ（ポップアップ）を開く Open subwindow
サブウィンドウを新規で開くには、window.openメソッドを使います。
構文
var newSubWindow = window.open(url, window name [, options]);引数
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
url | string | 新規ウィンドウで表示するURL |
| 第二引数 必須 |
window name | string | ウィンドウ名 |
| 第三引数 | options | string | 幅やスクロールの有無など各種オプション |
戻り値
開いたウィンドウのオブジェクトを返します。
デモ
サンプルコード
JavaScript
var openElem = document.getElementById('sub-window');
openElem.onclick = function(event) {
var targetUrl = this.href,
targetName = this.target;
if (!targetName) targetName = '';
window.open(this.href, targetName);
// イベントの初期動作と伝播を停止
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
};オプション
オプションはカンマ区切りで指定します。
ツールバーなど表示非表示を設定する項目については、ブラウザにより設定の可否が異なります。
JavaScript
window.open(
url,
'_blank',
'width=640,height=480,menubar=no,toolbar=no,status=no,scrollbars=no,location=no,resizable=no'
);| オプション | 設定可能値 | 初期値 | 説明 |
|---|---|---|---|
| width | 数値 | 横幅 | |
| height | 数値 | 縦幅 | |
| left | 数値 | 左からの位置 | |
| top | 数値 | 上からの位置 | |
| titlebar | yes / no | yes | タイトルバーの有無 |
| menubar | yes / no | yes | メニューバーの有無 |
| toolbar | yes / no | yes | ツールバーの有無 |
| location | yes / no | yes | アドレスバーの有無 |
| status | yes / no | yes | ステータスバーの有無 |
| resizable | yes / no | yes | リサイズの可否 |
| scrollbars | yes / no | yes | スクロールバーの有無 |
| directories | yes / no | yes | ディレクトリバーの有無 |
| fullscreen | yes / no | yes | フルスクリーンの有無 |