JavaScriptのwindowオブジェクトに含まれるopen()メソッドを使用することで、新しいウィンドウを開くことができます。基本的な構文は以下の通りです：
window.open (URL, name, features, replace)
引数の詳細は以下の通りです：
- URL：オプションの文字列で、新しいウィンドウに表示するページのURLを指定します。指定しない場合や空文字の場合、新しいウィンドウには何も表示されません。
- name：オプションの文字列で、新しいウィンドウの名前を設定します。この名前は<a>タグや<form>タグのtarget属性値として利用できます。すでに存在するウィンドウ名が指定された場合は、新しいウィンドウは作成せず、既存のウィンドウへの参照を返します。この場合、featuresパラメータは無視されます。
- features：オプションの文字列で、新しいウィンドウに適用するブラウザの標準機能を指定します。以下の表に詳細を示します。このパラメータを省略すると、すべての標準機能が適用されます。
- replace：オプションのブール値で、指定したURLがブラウザ履歴に新しいエントリとして追加されるか、現在のエントリを置き換えるかを指定します。
このメソッドは新しく作成されたwindowオブジェクトを返し、これを使って新しいウィンドウを操作できます。
ウィンドウの表示設定
| 設定項目 | 説明 |
|---|---|
| fullscreen = yes | no | 1 | 0 | フルスクリーンモードでの表示を行うかどうか。デフォルトはno。フルスクリーンモードではシアター表示も有効になります。 |
| height = pixels | ウィンドウのコンテンツ領域の高さ。単位はピクセルです。 |
| left = pixels | ウィンドウのX座標。単位はピクセルです。 |
| location = yes | no | 1 | 0 | アドレスバーの表示有無。デフォルトはyesです。 |
| menubar = yes | no | 1 | 0 | メニューの表示有無。デフォルトはyesです。 |
| resizable = yes | no | 1 | 0 | ウィンドウサイズの変更可否。デフォルトはyesです。 |
| scrollbars = yes | no | 1 | 0 | スクロールバーの表示有無。デフォルトはyesです。 |
| status = yes | no | 1 | 0 | ステータスバーの表示有無。デフォルトはyesです。 |
| toolbar = yes | no | 1 | 0 | ツールバーの表示有無。デフォルトはyesです。 |
| top = pixels | ウィンドウのY座標 |
| width = pixels | ウィンドウのコンテンツ領域の幅。単位はピクセルです。 |
新しく作成されたwindowオブジェクトにはopenerプロパティがあり、これを介して元のウィンドウを参照できます。openerプロパティはポップアップウィンドウの最上位windowオブジェクト(top)でのみ定義され、window.open()メソッドを呼び出したウィンドウまたはフレームを指します。
サンプル1
以下のコードは、開いたウィンドウと元のウィンドウとの関係を示しています。
win = window.open(); // 新しい空白ウィンドウを開く
win.document.write ("<h1>新しいウィンドウです</h1>"); // 新しいウィンドウにメッセージを出力
win.focus (); // 元のウィンドウにフォーカスを移す
win.opener.document.write ("<h1>元のウィンドウです</h1>"); // 元のウィンドウにメッセージを出力
console.log(win.opener == window); // window.openerプロパティの確認
ウィンドウを閉じるにはwindowのclose()メソッドを使用します。例えば、新しく作成したwinウィンドウを閉じるには以下のようにします。
win.close;
もし開いたウィンドウ内でそのウィンドウ自身を閉じる場合は、以下の方法で実行します。
window.close;
サンプル2
以下のコードは、自動的にウィンドウを開いてから半秒後に閉じるサンプルであり、ユーザーがリンクをクリックして表示するページを変更できるようにしています。
var pageUrl = "c.biancheng.net"; // 開くページのURL
var options = "height=500, width=800, top=100, left=100, toolbar=no, menubar=no,
scrollbars=no,resizable=no, location=no, status=no"; // ウィンドウの設定
// リンクを動的に生成
document.write('<a href="c.biancheng.net" target="newWindow">C言語中文网首页に移動</a>');
var popup = window.open(pageUrl, "newWindow", options); // 新しいウィンドウを開く
setTimeout (function () { // タイマー処理
if (popup.closed) {
console.log("作成されたウィンドウは既に閉じられています。");
} else {
popup.close();
}
}, 5000); // 5秒後にウィンドウを閉じる
サンプル3
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>新しいウィンドウを開く</title>
<script type="text/javascript" >
function showPopup(url,width,height){
window.open(url, "popupWindow", "scrollbars=yes,resizable=yes,statebar=no,width="+width+",height="+height+",left=200, top=100");
}
</script>
</head>
<body>
| \| **注文リスト：** \| <input class="np coolbg" name="ss13" onclick="javascript:showPopup('#',680,450);" type="button" value="未払い"></input> \| \|---\|--:\| |
|---|
</td>
</tr>
</table>
<a href="javascript:showPopup('shops_operations_cart.php?oid=S-P1586654454RN545',680,450);" >[詳細]</a>
動作イメージは以下の通りです：
参考資料：windowオブジェクトのopen()メソッドを使用して新しいウィンドウを開く
日付：2020.1.22 lzb