JavaScript Window（ウィンドウ）

概要: このチュートリアルでは、ブラウザにおける JavaScript のグローバルオブジェクトである window オブジェクトについて学習します。これはブラウザの機能を公開します。

window オブジェクトはグローバルです

Webブラウザにおける JavaScript のグローバルオブジェクトは、window オブジェクトです。これは、var キーワードでグローバルに宣言されたすべての変数と関数が、window オブジェクトのプロパティとメソッドになることを意味します。例えば

var counter = 1;
var showCounter = () => console.log(counter);

console.log(window.counter);
window.showCounter();
Code language: JavaScript (javascript)

出力

1
counter 1

counter 変数と showCounter() 関数は var キーワードでグローバルに宣言されているため、自動的に window オブジェクトに追加されます。

window オブジェクトを汚染したくない場合は、let キーワードを使用して変数と関数を宣言できます。

window オブジェクトはブラウザの機能を公開します

window オブジェクトは、Web ページに Web ブラウザの機能を公開します。

1) ウィンドウサイズ

window オブジェクトには、ウィンドウのサイズに関連する 4 つのプロパティがあります

• innerWidth プロパティと innerHeight プロパティは、ブラウザウィンドウ内のページビューポートのサイズを返します（境界線とツールバーは含まれません）。
• outerWidth プロパティと outerHeight プロパティは、ブラウザウィンドウ自体のサイズを返します。

また、document.documentElement.clientWidth プロパティと document.documentElement.clientHeight プロパティは、ページビューポートの幅と高さを示します。

ウィンドウのサイズを取得するには、次のスニペットを使用します

const width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

const height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;    
Code language: JavaScript (javascript)

2) 新しいウィンドウを開く

新しいウィンドウまたはタブを開くには、window.open() メソッドを使用します

window.open(url, windowName, [windowFeatures]);
Code language: CSS (css)

window.open() メソッドは、ロードする URL、ウィンドウターゲット、ウィンドウ機能の文字列の 3 つの引数を受け入れます。

3 番目の引数は、新しいウィンドウの表示情報を指定する設定の、コマンド区切りの文字列です（幅、高さ、メニューバー、サイズ変更可能など）。

window.open() メソッドは、window オブジェクトの薄いラッパーである WindowProxy オブジェクトを返します。新しいウィンドウを開けない場合は、null を返します。

たとえば、ローカルホストでページ about.html をロードする新しいウィンドウを開くには、次のコードを使用します

let url = 'http://localhost/js/about.html';
let jsWindow = window.open(url,'about');Code language: JavaScript (javascript)

このコードは、新しいタブで about.html ページを開きます。ウィンドウの height と width を指定すると、新しいタブではなく、新しい独立したウィンドウで URL が開きます

let features = 'height=600,width=800',
    url = 'http://localhost/js/about.html';

let jsWindow = window.open(url, 'about', features);Code language: JavaScript (javascript)

既存のウィンドウに別の URL をロードするには、既存のウィンドウ名を window.open() メソッドに渡します。次の例では、contact.html Web ページを contact ウィンドウにロードします

window.open('http://localhost/js/contact.html','about');Code language: JavaScript (javascript)

すべてをまとめます。次のコードは、Web ページ about.html をロードする新しいウィンドウを開き、3 秒後に同じウィンドウに Web ページ contact.html をロードします

let features = 'height=600,width=800',
    url = 'http://localhost/js/about.html';

let jsWindow = window.open(url, 'about', features);

setTimeout(() => {
    window.open('http://localhost/js/contact.html', 'about')
}, 3000);Code language: JavaScript (javascript)

3) ウィンドウのサイズ変更

ウィンドウのサイズを変更するには、window オブジェクトの resizeTo() メソッドを使用します

window.resizeTo(width,height);Code language: JavaScript (javascript)

次の例では、http://localhost/js/about.html ページをロードする新しいウィンドウを開き、3 秒後に (600,300) にサイズ変更します

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=800');

setTimeout(() => {
    jsWindow.resizeTo(600, 300);
}, 3000);Code language: JavaScript (javascript)

window.resizeBy() メソッドを使用すると、現在のウィンドウを指定した量だけサイズ変更できます

window.resizeBy(deltaX,deltaY);Code language: JavaScript (javascript)

例えば

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

// shrink the window, or resize the window 
// to 500x500
setTimeout(() => {
    jsWindow.resizeBy(-100, -100);
}, 3000);Code language: JavaScript (javascript)

4) ウィンドウの移動

ウィンドウを指定した座標に移動するには、moveTo() メソッドを使用します

window.moveTo(x, y);Code language: JavaScript (javascript)

このメソッドでは、x と y は移動先の水平座標と垂直座標です。次の例では、新しいウィンドウを開き、3 秒後に (0,0) 座標に移動します

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.moveTo(500, 500);
}, 3000);Code language: JavaScript (javascript)

同様に、現在のウィンドウを指定した量だけ移動できます

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.moveBy(100, -100);
}, 3000);Code language: JavaScript (javascript)

5) ウィンドウを閉じる

ウィンドウを閉じるには、window.close() メソッドを使用します

window.open()Code language: JavaScript (javascript)

次の例では、新しいウィンドウを開き、3 秒後に閉じます

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.close();
}, 3000);
Code language: JavaScript (javascript)

6) window.opener プロパティ

新しく作成されたウィンドウは、window.opener プロパティを介して、それを開いたウィンドウを参照できます。これにより、2 つのウィンドウ間でデータを交換できます。

まとめ

• window は、Web ブラウザのグローバルオブジェクトです。
• window オブジェクトは、Web ブラウザの機能を公開します。
• window オブジェクトは、open()、resizeTo()、resizeBy()、moveTo()、moveBy()、close() など、ウィンドウを操作するためのメソッドを提供します。