JavaScript には、ロボット ウィンドウなどの追加操作を実行するためにブラウザ ウィンドウを開いたり閉じたりするための組み込みメソッドが用意されています。これらのメソッドは、ブラウザ ウィンドウのポップアップを開閉するのに役立ちます。ウィンドウメソッドは次のとおりです。
の 窓を開く メソッドは、新しい Web ページを新しいウィンドウで開くために使用され、 ウィンドウを閉じる window.openメソッドで開いたWebページを閉じるメソッド。 window.open() メソッドの詳細を参照してください。
Window.open()
あらかじめ定義されたウィンドウメソッドです。 JavaScript ブラウザで新しいタブまたはウィンドウを開くために使用されます。これは、ブラウザの設定、または新しいウィンドウまたはタブが開く window.open() メソッドで渡されるパラメータによって異なります。
この方法は、Chrome などのほとんどすべての一般的な Web ブラウザでサポートされています。 Firefox など。以下は、ウィンドウを開くメソッドの構文とパラメータです。
構文
この関数は 4 つのパラメータを受け入れますが、それらはオプションです。
window.open(URL, name, specs, replace);
または
この機能は、 窓 以下に示すキーワード:
open(URL, name, specs, replace)
両方の構文に違いはありません。
パラメータリスト
以下は window.open() メソッドのパラメータリストです。このメソッドのすべてのパラメータはオプションであり、動作が異なることに注意してください。
URL: window.open() 関数のこのオプションのパラメータには、開く Web ページの URL 文字列が含まれます。この関数で URL を指定しない場合は、新しい空白のウィンドウが開きます ( 概要:空白 ）。
名前： このパラメータを使用すると、開くウィンドウの名前を設定できます。次の値がサポートされています。
| _空白 | 渡された URL は新しいタブ/ウィンドウにロードされます。 |
| _親 | URL は、すでに開かれている親ウィンドウまたはフレームにロードされます。 |
| _自己 | このパラメータを渡すと、URL が以前の出力を置き換え、同じフレーム内に新しいウィンドウが開きます。 |
| _上 | URL は、ロードできるフレームセットを置き換えます。 |
| 名前 | テキストまたはデータを表示する新しいウィンドウの名前を指定します。 (注 - ウィンドウのタイトルではありません) |
上記で指定した値は、一重引用符または二重引用符内で、name パラメーターの場所にある window.open() 関数に渡されます。
仕様: このパラメータには、カンマで区切られた設定が含まれます。このパラメータで使用される要素には空白を含めることはできません。 例: 幅=150、高さ=100 。
いくつかの値がサポートされています。
交換する： window.open() メソッドの他のパラメータと同様、これもオプションのパラメータです。新しいエントリを作成するか、履歴リストの現在のエントリを置き換えます。 2 つのブール値をサポートします。これは、true または false を返すことを意味します。
| 真実 | URL が履歴リスト内の現在のエントリまたはドキュメントを置き換える場合は true を返します。 |
| 間違い | URL が履歴リストに新しいエントリを作成する場合は false を返します。 |
戻り値
新しく開いたウィンドウが返されます。
例
以下に、ブラウザのウィンドウ/タブを開く window.open() 関数の例をいくつか示します。デフォルトでは、指定された URL が新しいタブまたはウィンドウで開きます。以下の例を参照してください。
1. URLパラメータを指定したopen()
これは、内部に Web サイトの URL を含むウィンドウを開くメソッドの簡単な例です。ボタンを使用しております。このボタンをクリックすると、window.open() メソッドが呼び出され、Web サイトが新しいブラウザ タブで開きます。
コードをコピーする
Click the button to open new window <br> <br> Open Window今すぐテストしてください
または
このコードは次のように記述できます。
コードをコピーする
function openWindow() { window.open('https://www.javatpoint.com'); } Click the button to open new window <br> <br> Open Window 今すぐテストしてください 出力
コンピューターネットワーク
これをクリックすると ウィンドウを開く ボタンを押すと、javatpoint サイトが同じウィンドウ内の新しいタブで開きます。
以下のスクリーンショットを参照してください。
2. パラメータなしの open()
この例では、新しいタブが前のウィンドウで開くように、window.open() 関数にパラメータを渡しません。
コードをコピーする
function openWindow() { window.open(); } Click the button to open new window <br> <br> Open Window 今すぐテストしてください 出力
上記のコードを実行すると、ボタンが表示されます。
これをクリックすると ウィンドウを開く ボタンを押すと、新しいタブで空のウィンドウが開きます。
3. 名前パラメータを指定した open()
この例では、 _親 name パラメータで。これらの値 (_parent、_blank、_top など) のいずれかを渡すことができます。
コードをコピーする
function openWindow() { window.open('https://gmail.com', '_parent'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window 今すぐテストしてください 出力
コードを実行すると、以下のような出力が得られます。これには、クリックして同じ親ウィンドウ上で新しい URL を開くためのボタンが含まれます。
このボタンをクリックすると、同じ親ウィンドウで Gmail が開きます。
2 番目のパラメーターに異なる値を渡すと、異なる値の違いが表示されます。
4. 新しいウィンドウのサイズを定義します
この例では、新しいウィンドウの高さと幅を指定します。このために、3 番目のパラメータ ( スペック ) window.open() メソッドで、ウィンドウの高さと幅をカンマで区切ってこの関数に渡します。したがって、ウィンドウは指定されたサイズで開きます。
コードをコピーする
function openWindow() { window.open('', '', 'width=300,height=200'); } <b> Click the button to open new window in same tab </b> <br> <br> Open Window 今すぐテストしてください 出力
上記のコードを実行すると、以下のような出力が得られます。これには、クリックして同じ親ウィンドウ上で新しい URL を開くためのボタンが含まれます。
このボタンをクリックすると、同じサイズの親ウィンドウの下に新しい空白のウィンドウが開きます。
URL を window.open() メソッドに渡して、任意の Web サイトを開くこともできることに注意してください。
新しいウィンドウを開き、名前とメッセージを表示します
ボタンをクリックすると開く新しいウィンドウにユーザー定義のテキストまたはフォームを表示できます。このためには、新しいウィンドウに任意の名前を付け、そこにテキストを書き込む必要があります。この名前は window.open() メソッドに渡されます。実際のコーディングでどのように実装されるかは、以下のコードを参照してください。
Javaでの比較
コードをコピーする
function openWindow() { var newtab = window.open('', 'anotherWindow', 'width=300,height=150'); newtab.document.write('<p> This is 'anotherWindow'. It is 300px wide and 150px tall new window! </p>'); } <b> Click the button to open the new user-defined sized window </b> <br> <br> Open Window 今すぐテストしてください 出力
コードを実行すると、以下のような出力が得られます。これには、クリックして同じ親ウィンドウ上の新しい URL を開くためのボタンが含まれます。
このボタンをクリックすると、新しいウィンドウが開き、サイズ 300*150 の親ウィンドウの下にユーザー定義のメッセージが表示されます。
JavaScript には、ブラウザ ウィンドウを閉じるための組み込みメソッド、つまり close() も提供されています。
window.open()で開いたウィンドウを閉じる
この例では、window.open() メソッドで開いたウィンドウまたはタブを閉じる方法を示します。まず、ボタンをクリックして新しいウィンドウ (コードで定義されたサイズ) で Web サイトの URL を開き、別のボタンを使用して開いたウィンドウを閉じます。それがどのように行われるかは、以下のコードを参照してください。
コードをコピーする
Open and close window method example // function to open the new window tab with specified size function windowOpen() { var newWindow = window.open( 'https://www.javatpoint.com/', '_blank', 'width=500, height=350'); } // function to close the window opened by window.open() function windowClose() { newWindow.close(); } <h2> Window open() and close() method </h2> <b> Click the button to open Javatpoint tutorial site </b> <br> Open Javatpoint <br> <br> <b> Click the button to close Javatpoint tutorial site </b> <br> Close Javatpoint 今すぐテストしてください 出力
コードを実行すると、次のような応答が返されます。
クリック Javatpointを開く ボタンをクリックして Javatpoint チュートリアル Web サイトを開きます。開く新しいポップアップ ウィンドウのサイズ (高さと幅) を指定しました。
をクリックすると、 Javatpointを閉じる ボタンを押すと、開いているウィンドウが最小化されます。
ブラウザのサポート
次のようないくつかの Web ブラウザは window.open() メソッドをサポートしています。
- クロム
- モジラ Firefox
- インターネットエクスプローラー（IE）
- オペラ
- サファリなど
上記のブラウザで window.open() メソッドを使用して実行できます。