KnowHub

ウィンドウオブジェクト

概要

ブラウザでは、「window」オブジェクト (「w」は小文字であることに注意してください) は、現在のブラウザ ウィンドウを指します。これは現在のページの最上位オブジェクト、つまり最上位オブジェクトでもあり、他のすべてのオブジェクトはその下位オブジェクトです。変数が宣言されていない場合、デフォルトで最上位オブジェクトのプロパティが使用されます。

a = 1;
window.a // 1

上記のコードでは、「a」は宣言なしで直接代入される変数であり、自動的にトップレベルオブジェクトのプロパティになります。

window には独自のエンティティの意味がありますが、最上位レベルのトップレベル オブジェクトとして使用するのは適切ではありません。これは言語設計上のエラーです。この言語が最初に設計されたときの当初の考え方は、ブラウザのパフォーマンスを向上させるためには、言語に組み込まれるオブジェクトの数が少ないほど良いというものでした。したがって、言語設計者のブレンダン・アイヒは「window」オブジェクトをトップレベルのオブジェクトとして扱い、宣言せずに割り当てられたすべての変数は自動的に「window」オブジェクトのプロパティになります。この設計により、コンパイル段階で宣言されていない変数を検出することができなくなりますが、現時点ではこれを修正する方法はありません。

ウィンドウオブジェクトのプロパティ

window.name

window.name プロパティは、現在のブラウザ ウィンドウの名前を表す文字列です。ウィンドウには必ずしも名前が必要ではありません。この属性は主にハイパーリンクとフォームの target 属性とともに使用されます。

window.name = 'Hello World!';
console.log(ウィンドウ名)
// "こんにちは世界！"

このプロパティは文字列のみを保存できます。書き込まれた値が文字列でない場合は、自動的に文字列に変換されます。この値の記憶容量はブラウザによって異なりますが、通常は最大数 MB になります。

ブラウザウィンドウを閉じない限り、この属性は消えません。たとえば、「a.com」にアクセスすると、ページのスクリプトは「window.name」を設定し、同じウィンドウに「b.com」をロードします。これにより、新しいページのスクリプトは前の Web ページを読み取ることができます。 window.name を設定します。これはページの更新にも当てはまります。ブラウザ ウィンドウを閉じると、ウィンドウは存在しなくなるため、このプロパティによって保存された値は消えます。

window.closed、window.opener

window.closed プロパティは、ウィンドウが閉じているかどうかを示すブール値を返します。

window.closed // false

上記のコードは、現在のウィンドウが閉じているかどうかを確認します。コードが実行できる限り、現在のウィンドウを閉じてはいけないため、このチェックはあまり重要ではありません。このプロパティは通常、スクリプトを使用して開かれた新しいウィンドウが閉じているかどうかを確認するために使用されます。

var ポップアップ = window.open();

if ((popup !== null) && !popup.closed) {
  // ウィンドウはまだ開いています
}

window.opener プロパティは、現在のウィンドウの親ウィンドウを開くことを示します。現在のウィンドウに親ウィンドウがない場合 (つまり、アドレス バーに入力して直接開いた場合)、null が返されます。

window.open().opener === ウィンドウ // true

上記の式は新しいウィンドウを開き、「true」を返します。

2 つのウィンドウ間で通信が必要ない場合は、子ウィンドウの opener 属性を明示的に null に設定することをお勧めします。これにより、セキュリティ リスクが軽減されます。

var newWin = window.open('example.html', 'newWindow', 'height=400,width=400');
newWin.opener = null;

上記のコードでは、子ウィンドウの opener 属性が null に設定されており、2 つのウィンドウ間で通信する方法はありません。

opener 属性を通じて、親ウィンドウのグローバル プロパティとメソッドを取得できますが、これは 2 つのウィンドウの起源が同じであり (「相同性の制限」の章を参照)、一方のウィンドウがもう一方のウィンドウによって開かれている場合に限られます。 。 rel="noopener" 属性を <a> 要素に追加すると、新しく開かれたウィンドウが親ウィンドウを取得するのを防ぎ、親ウィンドウの URL が悪意のある Web サイトによって変更されるリスクを軽減できます。

<a href="https://an.evil.site" target="_blank" rel="noopener">
悪意のあるウェブサイト
</a>

window.self、window.window

window.self プロパティと window.window プロパティは両方ともウィンドウ自体を指します。これら 2 つのプロパティは読み取り専用です。

window.self === ウィンドウ // true
window.window === ウィンドウ // true

window.frames、window.length

window.frames プロパティは、frame 要素や iframe 要素を含む、ページ内のすべてのフレーム ウィンドウをメンバーとする配列のようなオブジェクトを返します。 window.frames[0] は、ページ内の最初のフレーム ウィンドウを表します。

iframe 要素に id または name 属性セットがある場合、その属性値を使用して iframe ウィンドウを参照できます。たとえば、<iframe name="myIFrame"> は、frames['myIFrame'] または frames.myIFrame で参照できます。

frames プロパティは実際には window オブジェクトのエイリアスです。

フレーム === ウィンドウ // true

したがって、「frames[0]」は「window[0]」でも表すことができます。ただし、意味論的な観点からは、frames の方が明確であり、window が依然としてグローバル オブジェクトであることを考慮すると、複数のウィンドウを表現する場合は常に frames[0] を使用することをお勧めします。詳細については、以下の「マルチウィンドウ操作」セクションを参照してください。

window.length プロパティは、現在の Web ページに含まれるフレームの総数を返します。現在の Web ページに frame 要素と iframe 要素が含まれていない場合、window.length は 0 を返します。

window.frames.length === window.length // true

上記のコードは、「window.frames.length」と「window.length」が等しい必要があることを示しています。

window.frameElement

window.frameElement 属性は主に、現在のウィンドウが別の Web ページに埋め込まれている (<object>、<iframe>、または <embed> 要素を埋め込む) 場合に使用され、現在のウィンドウが配置されている要素ノードを返します。が位置しています。現在のウィンドウがトップレベル ウィンドウである場合、または埋め込まれた Web ページが同じ起源のものではない場合、このプロパティは null を返します。

// HTMLコードは以下の通り
// <iframe src="about.html"></iframe>

//以下のスクリプトはabout.html内にあります
var FrameEl = window.frameElement;
if (frameEl) {
  FrameEl.src = 'other.html';
}

上記のコードでは、frameEl 変数は <iframe> 要素です。

window.top、window.parent

window.top プロパティは最上位のウィンドウを指し、主にフレーム ウィンドウの最上位のウィンドウを取得するために使用されます。

window.parent プロパティは親ウィンドウを指します。現在のウィンドウに親ウィンドウがない場合、window.parent はそれ自体を指します。

if (window.parent !== window.top) {
  // 現在のウィンドウが複数のレイヤーに埋め込まれていることを示します
}

フレームを含まない Web ページの場合、これら 2 つのプロパティは window オブジェクトと同等です。

ウィンドウ.ステータス

window.status プロパティは、ブラウザのステータス バーのテキストの読み書きに使用されます。ただし、現在多くのブラウザではステータス バーのテキストを書き換えることができないため、この方法は効果的ではない可能性があります。

window.devicePixelRatio

window.devicePixelRatio プロパティは、CSS ピクセルのサイズと物理ピクセルのサイズの比率を表す数値を返します。つまり、CSS ピクセルが何個の物理ピクセルで構成されているかを示します。この比率が大きい場合、ユーザーが高解像度の画面を使用していることを意味し、より大きなピクセル画像を表示できます。

ポジションサイズ属性

次のプロパティは、「window」オブジェクトの位置とサイズの情報を返します。

(1)window.screenX、window.screenY

window.screenX プロパティと window.screenY プロパティは、現在の画面の左上隅を基準としたブラウザ ウィンドウの左上隅の水平距離と垂直距離 (ピクセル単位) を返します。これら 2 つのプロパティは読み取り専用です。

(2) window.innerHeight、window.innerWidth

window.innerHeight プロパティと window.innerWidth プロパティは、現在のウィンドウ内の Web ページの表示部分の高さと幅、つまり「ビューポート」のサイズ (ピクセル単位) を返します。これら 2 つのプロパティは読み取り専用です。

ユーザーが Web ページを拡大すると (たとえば、Web ページを 100% から 200% に拡大すると)、これら 2 つの属性は小さくなります。この時点では、Web ページのピクセル サイズは変わりません (たとえば、幅は 960 ピクセルのまま) が、各ピクセルが占める画面スペースが大きくなるため、表示される部分 (ビューポート) が小さくなります。

これら 2 つのプロパティ値には、スクロール バーの高さと幅が含まれることに注意してください。

(3)window.outerHeight、window.outerWidth

window.outerHeight プロパティと window.outerWidth プロパティは、ブラウザ メニューと境界線を含むブラウザ ウィンドウの高さと幅 (ピクセル単位) を返します。これら 2 つのプロパティは読み取り専用です。

(4)window.scrollX、window.scrollY

window.scrollX プロパティはページの水平スクロール距離を返し、window.scrollY プロパティはページの垂直スクロール距離をピクセル単位で返します。これら 2 つのプロパティは読み取り専用です。

これら 2 つのプロパティの戻り値は整数ではなく、倍精度浮動小数点数であることに注意してください。ページがスクロールされていない場合、値は 0 になります。

たとえば、ユーザーが垂直スクロール バーを 75 ピクセル下に引き下げた場合、「window.scrollY」は約 75 ピクセルになります。ユーザーは水平スクロール バーを水平方向に 200 ピクセル右に引っ張ります。「window.scrollX」は約 200 ピクセルです。

if (window.scrollY < 75) {
  window.scroll(0, 75);
}

上記のコードでは、ページが 75 ピクセル未満下にスクロールすると、ページは 75 ピクセル下にスクロールします。

(5)window.pageXOffset、window.pageYOffset

window.pageXOffset プロパティと window.pageYOffset プロパティは、window.scrollX と window.scrollY のエイリアスです。

コンポーネントのプロパティ

コンポーネント プロパティはブラウザのコンポーネント オブジェクトを返します。このような属性には次のようなものがあります。

  • window.locationbar: アドレスバーオブジェクト
  • window.menubar: メニューバーオブジェクト
  • window.scrollbars: ウィンドウのスクロールバーオブジェクト
  • window.toolbar: ツールバーオブジェクト
  • window.statusbar: ステータスバーオブジェクト
  • window.personalbar: ユーザーがインストールした個人用ツールバー オブジェクト

これらのオブジェクトの「visible」プロパティは、これらのコンポーネントが表示されるかどうかを示すブール値です。これらのプロパティは読み取り専用です。

window.locationbar.visible
window.menubar.visible
window.scrollbars.visible
window.toolbar.visible
window.statusbar.visible
window.personalbar.visible

グローバルオブジェクトのプロパティ

グローバル オブジェクトのプロパティは、いくつかのブラウザネイティブのグローバル オブジェクトを指します。

  • window.document: document オブジェクトを指します。詳細については、「Document オブジェクト」の章を参照してください。このプロパティには同一生成元の制限があることに注意してください。同じ生成元のスクリプトのみがこのプロパティを読み取ることができます。
  • window.location: 現在のウィンドウの URL 情報を取得するために使用される Location オブジェクトへのポインタ。これは document.location プロパティと同等です。詳細については、「Location オブジェクト」の章を参照してください。
  • window.navigator: 環境情報を取得するために使用される Navigator オブジェクトを指します。詳細については、「Navigator オブジェクト」の章を参照してください。
  • window.history: ブラウザの閲覧履歴を表す History オブジェクトを指します。詳細については、「History オブジェクト」の章を参照してください。
  • window.localStorage: ローカルに保存された localStorage データを指します。 詳細については、「ストレージ インターフェイス」の章を参照してください。
  • window.sessionStorage: ローカルに保存された sessionStorage データを指します。 詳細については、「ストレージ インターフェイス」の章を参照してください。
  • window.console: コンソールを操作するために使用される console オブジェクトを指します。詳細については、「コンソール オブジェクト」の章を参照してください。
  • window.screen: 画面情報を示す Screen オブジェクトを指します。詳細については、「Screen オブジェクト」の章を参照してください。

window.isSecureContext

window.isSecureContext プロパティは、現在のウィンドウが暗号化された環境にあるかどうかを示すブール値を返します。 HTTPS プロトコルの場合は「true」、そうでない場合は「false」になります。

ウィンドウオブジェクトのメソッド

window.alert()、window.prompt()、window.confirm()

window.alert()、window.prompt()、および window.confirm() はすべて、ブラウザがユーザーと対話するためのグローバル メソッドです。さまざまなダイアログ ボックスがポップアップ表示され、ユーザーに応答を求めます。これら 3 つの方法でポップアップされるダイアログ ボックスはすべてブラウザで指定されたスタイルになっており、カスタマイズできないことに注意してください。

(1)window.alert()

window.alert() メソッドによってポップアップされるダイアログ ボックスには「OK」ボタンが 1 つだけあり、これはユーザーに特定の情報を通知するためによく使用されます。

window.alert('Hello World');

ユーザーが「OK」ボタンをクリックするまでダイアログボックスは消えません。ダイアログ ボックスが表示されている間、ブラウザ ウィンドウはフリーズしており、ユーザーは [OK] ボタンをクリックするまで何もできません。

window.alert() メソッドのパラメータは文字列のみにすることができ、CSS スタイルは使用できませんが、\n を使用して改行を指定することができます。

alert('このプロンプトは\n 2 行に分かれています');

(2)window.prompt()

window.prompt() メソッドによってポップアップされるダイアログ ボックスでは、プロンプト テキストの下に情報の入力を求める入力ボックスがあり、「OK」と「キャンセル」の 2 つのボタンがあります。ユーザーが入力したデータを取得するためによく使用されます。

var result = プロンプト('あなたの年齢は何ですか?', 25)

上記のコードは、「あなたの年齢は何ですか?」というテキスト プロンプトを含むダイアログ ボックスをポップアップ表示し、ユーザーはダイアログ ボックスに年齢を入力する必要があります (デフォルトでは 25 が表示されます)。ユーザーが入力した値は、戻り値として変数 result に格納されます。

window.prompt() の戻り値には 2 つの状況があり、文字列 (おそらく空の文字列) である場合と、null である場合があります。具体的には3つの状況に分けられます。

  1. ユーザーが情報を入力して「OK」をクリックすると、ユーザーが入力した情報が戻り値となります。
  2. ユーザーが情報を入力せずに直接「OK」をクリックした場合、入力ボックスのデフォルト値が戻り値となります。
  3. ユーザーが「キャンセル」をクリックした場合（または ESC ボタンを押した場合）、戻り値は「null」です。

window.prompt() メソッドの 2 番目のパラメータはオプションですが、常に 2 番目のパラメータを入力ボックスのデフォルト値として指定することをお勧めします。

(3)window.confirm()

プロンプト情報に加えて、window.confirm() メソッドによってポップアップされるダイアログ ボックスには、「OK」と「キャンセル」の 2 つのボタンしかありません。これらのボタンは、ユーザーに同意を求めるためによく使用されます。

var result =confirm('調子はどうですか?');

上記のコードは、「調子はどうですか?」という 1 行のテキストだけを含むダイアログ ボックスをポップアップ表示し、ユーザーは「OK」または「キャンセル」をクリックすることを選択します。

「confirm」メソッドは、ユーザーが「OK」をクリックすると「true」を返し、「キャンセル」をクリックすると「false」を返します。

var ok =confirm('このメッセージを確認してください。');
もし (大丈夫) {
  // ユーザーが「OK」を押す
} それ以外 {
  // ユーザーが「キャンセル」を押した
}

「confirm」の使用法の 1 つは、ユーザーが現在のページを離れるときに、本当にこのページを離れたいかどうかをユーザーに尋ねるダイアログ ボックスがポップアップすることです。

window.onunload = function () {
  return window.confirm('対面ページを終了してもよろしいですか?');
}

これら 3 つのメソッドにはすべてブロック効果があります。ダイアログ ボックスが表示されると、ページ全体が実行を一時停止し、ユーザーの反応を待ちます。

window.open()、window.close()、window.stop()

(1)window.open()

window.open メソッドは、ブラウザ メニューの [新しいウィンドウ] オプションと同様に、別のブラウザ ウィンドウを作成するために使用されます。新しいウィンドウへの参照を返すか、新しいウィンドウを作成できない場合は「null」を返します。

var ポップアップ = window.open('somefile.html');

上記のコードにより、ブラウザは現在のドメイン名の「somefile.html」という URL を含む新しいウィンドウをポップアップ表示します。

「open」メソッドは合計 3 つのパラメータを受け入れることができます。

window.open(url, ウィンドウ名, [ウィンドウの機能])
  • url: 新しいウィンドウの URL を表す文字列。省略した場合、デフォルトの URL は「about:blank」です。
  • windowName: 新しいウィンドウの名前を示す文字列。この名前のウィンドウがすでに存在する場合、そのウィンドウは占有され、新しいウィンドウは作成されません。省略した場合、デフォルトでは _blank が使用され、名前のない新しいウィンドウを示します。また、いくつかのプリセット値があり、_self は現在のウィンドウを表し、_top はトップレベルのウィンドウを表し、_parent は前のウィンドウを表します。
  • windowFeature: 文字列。内容はコンマで区切られたキーと値のペア (詳細は以下を参照) で、プロンプト バーやツールバーなどの有無など、新しいウィンドウのパラメーターを示します。省略した場合、デフォルトで完全な UI を含む新しいウィンドウが開きます。新しいウィンドウが既存のウィンドウである場合、このパラメータは効果がなく、ブラウザは前のウィンドウのパラメータを使用します。

以下に例を示します。

var ポップアップ = window.open(
  'somepage.html',
  '定義Windows',
  '高さ=200、幅=200、場所=いいえ、ステータス=はい、サイズ変更可能=はい、スクロールバー=はい'
);

上記のコードは、開いた新しいウィンドウの高さと幅が 200 ピクセルであることを示しています。アドレス バーはありませんが、ステータス バーとスクロール バーがあり、ユーザーがサイズを調整できます。

3 番目のパラメーターでは、次のプロパティを設定できます。

  • left: 画面の左端からの新しいウィンドウの距離 (単位ピクセル)。新しいウィンドウは表示されている必要があり、画面外に設定することはできないことに注意してください。
  • top: 新しいウィンドウと画面の上部の間の距離 (単位ピクセル)。
  • 高さ: 新しいウィンドウのコンテンツ領域の高さ (ピクセル単位)。100 未満であってはなりません。
  • width: 新しいウィンドウのコンテンツ領域の幅 (ピクセル単位)。100 未満であってはなりません。
  • externalHeight: ブラウザ ウィンドウ全体の高さ (ピクセル単位)。100 未満であってはなりません。
  • externalWidth: ブラウザ ウィンドウ全体の幅 (ピクセル単位)。100 未満であってはなりません。
  • menubar: メニューバーを表示するかどうか。
  • ツールバー: ツールバーを表示するかどうか。
  • location: アドレスバーを表示するかどうか。
  • Personalbar: ユーザーがインストールしたツールバーを表示するかどうか。
  • status: ステータスバーを表示するかどうか。
  • 依存: 親ウィンドウに依存するかどうか。依存する場合、親ウィンドウが最小化されると、親ウィンドウが閉じられるとウィンドウも最小化され、ウィンドウも閉じられます。
  • minimizable: dialog=yes の場合、最小化ボタンがあるかどうか。
  • noopener: 新しいウィンドウは親ウィンドウとの接続を遮断します。つまり、新しいウィンドウの window.opener プロパティは null を返し、親ウィンドウの window.open() メソッドも戻ります。 「ヌル」。
  • resizable: 新しいウィンドウのサイズを変更できるかどうか。
  • スクロールバー: 新しいウィンドウにスクロール バーを表示できるかどうか。
  • ダイアログ: 最大化、最小化、および元のサイズに戻すためのコントロールを新しいウィンドウのタイトル バーに表示するかどうか。
  • titlebar: 新しいウィンドウにタイトル バーを表示するかどうか。
  • alwaysRaized: すべてのウィンドウの上に表示するかどうか。
  • alwaysLowered: 親ウィンドウの下部に表示するかどうか。
  • close: 新しいウィンドウに閉じるボタンを表示するかどうか。

オンまたはオフにできる属性については、「yes」または「1」に設定するか、値を設定しないと、たとえば「status=yes」、「status=1」、「status」がオンになります。同じ結果が得られます。オフに設定したい場合は、「no」と書く必要はなく、この属性を省略するだけです。つまり、いくつかの属性が 3 番目のパラメータに設定されている場合、設定されていない他の yes/no 属性は、titlebar と閉じるボタンを除き、no に設定されます (それらの値のデフォルトは はい)。

上記の属性の場合、属性名と属性値は等号で接続され、属性はカンマで区切られます。

'高さ=200、幅=200、場所=いいえ、ステータス=はい、サイズ変更可能=はい、スクロールバー=はい'

また、open() メソッドの 2 番目のパラメータでは既存のウィンドウを指定できますが、他のウィンドウを任意に制御できるわけではありません。無関係なウィンドウによって制御されるのを防ぐため、ブラウザは、2 つのウィンドウの原点が同じである場合、またはターゲット ウィンドウが現在の Web ページによって開かれている場合にのみ、「open」メソッドがウィンドウを指すことを許可します。

window.open メソッドは、新しいウィンドウへの参照を返します。

var windowB = window.open('windowB.html', 'WindowB');
windowB.window.name // "ウィンドウB"

新しいウィンドウと親ウィンドウが同じ起源のものでない場合 (つまり、同じドメイン内にない場合)、他のウィンドウ オブジェクトの内部プロパティを取得できないことに注意してください。

別の例を示します。

var w = window.open();
console.log('新しいウィンドウが開きました');
w.location = 'http://example.com';

上記のコードは、まず新しいウィンドウを開き、次にウィンドウ内にダイアログ ボックスをポップアップ表示し、URL を「example.com」に送信します。

「open」メソッドは悪用されやすいため、多くのブラウザではデフォルトでスクリプトによるウィンドウの自動作成が許可されていません。ユーザーがリンクまたはボタンをクリックしたときにのみ、スクリプトが反応して新しいウィンドウをポップアップできるようにします。したがって、新しいウィンドウが正常に開いたかどうかを確認する必要があります。

var ポップアップ = window.open();
if (ポップアップ === null) {
  // 新しいウィンドウの作成に失敗しました
}

(2)window.close()

window.close メソッドは、現在のウィンドウを閉じるために使用されます。通常、window.open メソッドによって作成されたウィンドウを閉じるためにのみ使用されます。

ポップアップ.クローズ()

このメソッドはトップレベル ウィンドウに対してのみ有効です。このメソッドは iframe フレーム内のウィンドウに対しては無効です。

(3)window.stop()

window.stop() メソッドは、ブラウザの停止ボタンをクリックすることと完全に同等であり、読み込み中または読み込みを待っている画像、ビデオ、その他のオブジェクトの読み込みを停止します。

window.stop()

window.moveTo()、window.moveBy()

window.moveTo() メソッドは、ブラウザ ウィンドウを指定された位置に移動するために使用されます。これは、ウィンドウの左上隅と画面の左上隅の間の水平距離と垂直距離の 2 つのパラメーターをピクセル単位で受け入れます。

window.moveTo(100, 200)

上記のコードは、ウィンドウを画面上の (100, 200) の位置に移動します。

window.moveBy() メソッドは、ウィンドウを相対位置に移動します。これは、ウィンドウの左上隅を右に移動する水平距離と、下に移動する垂直距離の 2 つのパラメータをピクセル単位で受け入れます。

window.moveBy(25, 50)

上記のコードは、ウィンドウを右に 25 ピクセル、下に 50 ピクセル移動します。

誰かがこれら 2 つのメソッドを悪用してユーザーのウィンドウを自由に移動するのを防ぐために、現在ブラウザでスクリプトを使用してウィンドウを移動できる状況は 1 つだけです。ウィンドウは window.open() を使用して作成されます。メソッドがあり、タブ ページにはそのメソッドが 1 つだけあります。それ以外の場合、上記 2 つの方法は無効です。

window.resizeTo()、window.resizeBy()

window.resizeTo() メソッドは、ウィンドウのサイズを指定されたサイズに変更するために使用されます。

これは 2 つのパラメータを受け入れます。1 つ目はスケーリングされたウィンドウの幅 (スクロール バー、タイトル バーなどを含む outerWidth プロパティ)、2 つ目はスケーリングされたウィンドウの高さ (outerHeight プロパティ) です。

window.resizeTo(
  window.screen.availWidth / 2、
  ウィンドウ.スクリーン.availHeight / 2
)

上記のコードは、現在のウィンドウを利用可能な画面領域の幅と高さの半分に拡大縮小します。

window.resizeBy() メソッドはウィンドウのサイズを変更するために使用されます。これと window.resizeTo() の違いは、相対量に従ってスケーリングすること、および window.resizeTo() はスケーリング後の絶対サイズを与える必要があることです。

2 つのパラメータを受け入れます。1 つ目は水平スケーリングの量、2 つ目は垂直スケーリングの量で、単位はピクセルです。

window.resizeBy(-200, -200)

上記のコードは、現在のウィンドウの幅と高さを 200 ピクセル縮小します。

window.scrollTo()、window.scroll()、window.scrollBy()

window.scrollTo メソッドは、ドキュメントを指定された位置までスクロールするために使用されます。これは、スクロール後のウィンドウの左上隅にあるページの座標を示す 2 つのパラメーターを受け取ります。

window.scrollTo(x 座標, y 座標)

構成オブジェクトをパラメータとして受け入れることもできます。

window.scrollTo(オプション)

設定オブジェクト「options」には 3 つのプロパティがあります。

  • top: スクロール後のページの左上隅の垂直座標、つまり y 座標。
  • left: スクロール後のページの左上隅の水平座標、つまり x 座標。
  • behavior: スクロール方法を示す文字列。 可能な値は 3 つあります (smooth、instant、auto)。デフォルト値は auto です。
window.scrollTo({
  上: 1000、
  動作: 「スムーズ」
});

window.scroll() メソッドは、window.scrollTo() メソッドのエイリアスです。

window.scrollBy() メソッドは、指定された距離 (ピクセル単位) で Web ページをスクロールするために使用されます。これは 2 つのパラメータを受け入れます。水平方向に右にスクロールするピクセルと、垂直方向に下にスクロールするピクセルです。

window.scrollBy(0, window.innerHeight)

上記のコードは、Web ページを 1 画面下にスクロールするために使用されます。

ドキュメント全体をスクロールするのではなく、特定の要素をスクロールしたい場合は、次の 3 つのプロパティとメソッドを使用できます。

-Element.scrollTop -Element.scrollLeft -Element.scrollIntoView()

window.print()

window.print メソッドは印刷ダイアログ ボックスをポップアップ表示します。これは、ユーザーがメニューの [印刷] コマンドをクリックしたのと同じ効果があります。

一般的な印刷ボタンのコードは次のとおりです。

document.getElementById('printLink').onclick = function () {
window.print();
}

デスクトップ以外の機器（携帯電話など）には印刷機能がない場合がありますので、その場合はご判断ください。

if (typeof window.print === '関数') {
  //印刷機能をサポート
}

window.focus()、window.blur()

window.focus() メソッドはウィンドウをアクティブ化し、フォーカスを獲得して他のウィンドウの前に表示されます。

var Popup = window.open('popup.html', 'ポップアップウィンドウ');

if ((popup !== null) && !popup.closed) {
ポップアップ.フォーカス();
}

上記のコードは、まず「ポップアップ」ウィンドウがまだ存在するかどうかを確認し、確認後にウィンドウをアクティブにします。

window.blur() メソッドはウィンドウからフォーカスを削除します。

現在のウィンドウがフォーカスを取得すると、focus イベントがトリガーされ、現在のウィンドウがフォーカスを失うと、blur イベントがトリガーされます。

window.getSelection()

window.getSelection メソッドは、ユーザーが現在選択しているテキストを表す Selection オブジェクトを返します。

var selObj = window.getSelection();

選択されたテキストは、Selection オブジェクトの toString メソッドを使用して取得できます。

var selectedText = selObj.toString();

window.getComputedStyle()、window.matchMedia()

window.getComputedStyle() メソッドは要素ノードをパラメータとして受け取り、要素の最終的なスタイル情報を含むオブジェクトを返します。詳細については、「CSS 操作」の章を参照してください。

window.matchMedia() メソッドは、CSS の mediaQuery ステートメントをチェックするために使用されます。詳細については、「CSS の操作」の章を参照してください。

window.requestAnimationFrame()

window.requestAnimationFrame() メソッドは setTimeout に似ており、どちらも特定の関数の実行を延期します。違いは、setTimeout は遅延時間を指定する必要があるのに対し、window.requestAnimationFrame() はブラウザの次のリフローまで延期され、実行が完了するまで次の再描画は実行されないことです。再描画は通常 16 ミリ秒ごとに実行されますが、ブラウザはこの速度を自動的に調整します。たとえば、Web ページが背景のタブ ページに切り替わると、requestAnimationFrame() は実行を一時停止します。

関数が Web ページのレイアウトを変更する場合、通常は「window.requestAnimationFrame()」内で実行されます。これにより、システム リソースが節約され、Web ページの効果がよりスムーズになります。遅いデバイスはより遅い速度でリフローと再描画を行いますが、より高速なデバイスはより速い速度で再描画するためです。

このメソッドはパラメータとしてコールバック関数を受け取ります。

window.requestAnimationFrame(コールバック)

上記のコードの callback はコールバック関数です。 「callback」が実行されると、そのパラメータはシステムによって渡される高精度のタイムスタンプです (「performance.now()」の戻り値)。単位はミリ秒で、Web ページがロードされてからの時間を示します。

window.requestAnimationFrame() の戻り値は整数であり、これを window.cancelAnimationFrame() に渡すことでコールバック関数の実行をキャンセルできます。

以下は、Web ページのアニメーションを実行する window.requestAnimationFrame() の例です。

var 要素 = document.getElementById('animate');
element.style.position = '絶対';

var 開始 = null;

関数ステップ(タイムスタンプ) {
  if (!start) start = タイムスタンプ;
  var progress = タイムスタンプ - 開始;
  // 要素は最大 200 ピクセルまで右に移動し続けます
  element.style.left = Math.min(進行状況 / 10, 200) + 'px';
  // 最初の実行から 2000 ミリ秒以内の場合、
  // アニメーションの実行を続けるだけです
  if (進行状況 < 2000) {
    window.requestAnimationFrame(ステップ);
  }
}

window.requestAnimationFrame(ステップ);

上記のコードは、要素を右に移動する 2 秒間の Web ページ アニメーションを定義します。

window.requestIdleCallback()

window.requestIdleCallback() は setTimeout と似ていますが、これも特定の関数の実行を延期しますが、システム リソースがアイドル状態になるまでコールバック関数が延期されることが保証されます。言い換えれば、タスクが重要でない場合は、「window.requestIdleCallback()」を使用してその実行を延期し、Web ページのパフォーマンスを確保できます。

これと window.requestAnimationFrame() の違いは、後者はブラウザが次回リフローされるときに実行されるコールバック関数を指定することです。問題は、システム リソースが次回のリフロー中にアイドル状態にならない可能性があることです。 ; window.requestIdleCallback() は、システム リソースがアイドル状態のときに確実に実行されるようにすることができます。

このメソッドは、コールバック関数と構成オブジェクトをパラメータとして受け取ります。構成オブジェクトでは、実行を遅延する最大時間を指定できます。この時間を過ぎると、システム リソースがアイドル状態であるかどうかに関係なく、コールバック関数が実行されます。

window.requestIdleCallback(コールバック[, オプション])

callback パラメータはコールバック関数です。コールバック関数が実行されると、システムは IdleDeadline オブジェクトをパラメータとして渡します。 IdleDeadline オブジェクトには、didTimeout プロパティ (タイムアウト呼び出しかどうかを示すブール値) と timeRemaining() メソッド (アイドル期間の残りミリ秒数を返す) があります。

現在、「options」パラメータは属性として「timeout」のみがあり、これはコールバック関数の実行を遅延させる最大ミリ秒数を指定するために使用されます。このパラメータはオプションです。

window.requestIdleCallback() メソッドは整数を返します。この整数を「window.cancelIdleCallback()」に渡すと、コールバック関数をキャンセルできます。

以下に例を示します。

requestIdleCallback(myNonEssentialWork);

function myNonEssentialWork(deadline) {
  while (deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }
}

上記のコードでは、requestIdleCallback() は、重要ではないタスク myNonEssentialWork を実行するために使用されます。タスクは実際にタスクの実行を開始する前に、まずこのアイドル期間に残り時間が存在することを確認します。

以下はタイムアウトを指定する例です。

requestIdleCallback(processPendingAnalyticsEvents, { タイムアウト: 2000 });

上記のコードは、「processPendingAnalyticsEvents」を次の 2 秒以内に実行する必要があることを指定しています。

タイムアウトによりコールバック関数が実行された場合、「deadline.timeRemaining()」は「0」を返し、「deadline.didTimeout」は「true」を返します。

window.requestIdleCallback() を複数回実行し、複数のコールバック関数を指定すると、これらのコールバック関数はキューに配置され、先入れ先出しの順序で実行されます。

イベント

window オブジェクトは次のイベントを受け取ることができます。

ロードイベントとonload属性

load イベントは、ブラウザ ウィンドウへのドキュメントの読み込みが完了したときに発生します。 window.onload 属性は、このイベントのコールバック関数を指定できます。

window.onload = function() {
  var elements = document.getElementsByClassName('example');
  for (var i = 0; i < elements.length; i++) {
    var elt = 要素[i];
    // ...
  }
};

上記のコードは、指定された要素を取得し、Web ページが読み込まれた後にそれを処理します。

エラー イベントと onerror 属性

ブラウザスクリプトでエラーが発生すると、window オブジェクトの error イベントがトリガーされます。 window.onerror プロパティを通じて、このイベントのコールバック関数を指定できます。

window.onerror = 関数 (メッセージ、ファイル名、行番号、列番号、エラー) {
  console.log("エラー! --> %s", error.stack);
};

歴史的な理由により、window の error イベントのコールバック関数はパラメータとしてエラー オブジェクトを受け入れませんが、合計 5 つのパラメータを受け入れることができ、その意味は次のとおりです。

  • エラーメッセージ
  • 問題のあるスクリプトの URL
  • 行番号
  • シリアルナンバー
  • エラーオブジェクト

古いブラウザでは、最初の 3 つのパラメータのみがサポートされます。

すべてのエラーが JavaScript の「error」イベントをトリガーするわけではありません (つまり、JavaScript にエラーを報告させます)。一般に、このイベントは JavaScript スクリプト エラーのみがトリガーされ、存在しないリソース ファイルなどのエラーはトリガーされません。

ページ全体で 3 つ以上の未捕捉エラーがある場合に警告を表示する例を次に示します。

window.onerror = function(msg, url, line) {
  if (onerror.num++ > onerror.max) {
    alert('エラー: ' + msg + '\n' + URL + ':' + line);
    true を返します。
  }
}
onerror.max = 3;
onerror.num = 0;

スクリプトの URL と Web ページの URL が同じドメインにない場合 (CDN を使用している場合など)、ブラウザーは詳細なエラー情報をまったく提供せず、エラーの種類は次のとおりです。 「スクリプト エラー。」行番号は 0 で、その他の情報はありません。これは、ブラウザが外部スクリプトへの情報漏洩を防ぐためのものです。解決策の 1 つは、スクリプトが配置されているサーバーに Access-Control-Allow-Origin HTTP ヘッダーを設定することです。

アクセス制御許可オリジン: *

次に、Web ページの <script> タグに crossorigin 属性を設定します。

<scriptcrossorigin="anonymous" src="//example.com/file.js"></script>

上記のコードの「crossorigin="anonymous"」は、ファイルを読み取るために ID 情報が必要ないこと、つまり、Cookie や HTTP 認証情報が必要ないことを意味します。 「crossorigin="use-credentials"」に設定すると、ブラウザが Cookie と HTTP 認証情報をアップロードし、サーバーも HTTP ヘッダー「Access-Control-Allow-Credentials」を開く必要があることを意味します。

ウィンドウオブジェクトのイベントリスニングプロパティ

要素ノードが持つ GlobalEventHandlers インターフェースに加えて、window オブジェクトは以下のイベントリスナー関数属性も持ちます。

  • window.onafterprint: afterprintイベントのリスニング関数。
  • window.onbeforeprint: beforeprintイベントのリスニング関数。
  • window.onbeforeunload: beforeunloadイベントのリスニング関数。
  • window.onhashchange: hashchangeイベントのリスニング関数。
  • window.on languagechange: languagechange のリスニング関数。
  • window.onmessage: messageイベントのリスニング関数。
  • window.onmessageerror: MessageError イベントのリスニング関数。
  • window.onoffline: offlineイベントのリスニング機能。
  • window.ononline: onlineイベントのリスニング関数。
  • window.onpagehide: pagehideイベントのリスニング関数。
  • window.onpageshow: pageshowイベントのリスニング関数。
  • window.onpopstate: popstateイベントのリスニング関数。
  • window.onstorage: storage イベントのリスニング関数。
  • window.onunhandledrejection: 未処理の Promise オブジェクトの reject イベントをリッスンする関数。
  • window.onunload: unloadイベントのリスニング関数。

マルチウィンドウ操作

Web ページは「iframe」要素を使用して他の Web ページを埋め込むことができるため、1 つの Web ページ内に複数のウィンドウが形成されます。サブウィンドウに他の Web ページが埋め込まれている場合は、複数レベルのウィンドウが形成されます。

ウィンドウリファレンス

各ウィンドウのスクリプトは他のウィンドウを参照できます。ブラウザには、他のウィンドウを返すための特別な変数がいくつか用意されています。

  • top: 最上位のウィンドウ、つまり最上部のウィンドウ
  • parent: 親ウィンドウ
  • self: 現在のウィンドウ、つまりそれ自体

次のコードは、現在のウィンドウがトップレベル ウィンドウであるかどうかを判断できます。

if (window.top === window.self) {
  // 現在のウィンドウはトップレベルのウィンドウです
} それ以外 {
  // 現在のウィンドウは子ウィンドウです
}

次のコードは、親ウィンドウのアクセス履歴を一度戻します。

window.parent.history.back();

これらの変数に対応して、ブラウザは、window.open() メソッド、<a> タグ、<form> タグなどによる参照用の特別なウィンドウ名も提供します。

  • _top: トップレベルウィンドウ
  • _parent: 親ウィンドウ
  • _blank: 新しいウィンドウ

次のコードは、トップレベル ウィンドウでリンクを開くことを意味します。

<a href="somepage.html" target="_top">リンク</a>

iframe 要素

「iframe」に埋め込まれたウィンドウの場合、「document.getElementById」メソッドはウィンドウの DOM ノードを取得し、「contentWindow」プロパティを使用して「iframe」ノードに含まれる「window」オブジェクトを取得します。

var フレーム = document.getElementById('theFrame');
var フレームウィンドウ = フレーム.コンテンツウィンドウ;

上記のコードでは、frame.contentWindow で子ウィンドウの window オブジェクトを取得できます。その後、同じ生成元の制限が満たされていれば、サブウィンドウ内のプロパティを読み取ることができます。

// サブウィンドウのタイトルを取得します
フレームウィンドウ.タイトル

<iframe> 要素の contentDocument 属性は、子ウィンドウの document オブジェクトを取得できます。

var フレーム = document.getElementById('theFrame');
var フレームドキュメント = フレーム.コンテンツドキュメント;

// と同等
var FrameDoc = フレーム.コンテンツウィンドウ.ドキュメント;

<iframe> 要素は、親ウィンドウと子ウィンドウが同じドメインにある場合にのみ、両者間でスクリプト通信を使用できます。それ以外の場合は、window.postMessage メソッドのみが使用できます。使用されます。

<iframe> ウィンドウ内で、window.parent を使用して親ウィンドウを参照します。現在のページに親ウィンドウがない場合、window.parent プロパティはそれ自体を返します。したがって、「window.parent」が「window.self」と等しいかどうかによって、現在のウィンドウが「iframe」ウィンドウであるかどうかを判断できます。

if (window.parent !== window.self) {
  // 現在のウィンドウは子ウィンドウです
}

<iframe> ウィンドウの window オブジェクトには、親ウィンドウの <iframe> DOM ノードを返す frameElement プロパティがあります。非埋め込みウィンドウの場合、このプロパティは「null」と等しくなります。

var f1Element = document.getElementById('f1');
var f1Window = f1Element.contentWindow;

f1Window.frameElement === f1Element // true
window.frameElement === null // true

window.frames プロパティ

window.frames プロパティは、すべての子ウィンドウの window オブジェクトをメンバーとする配列のようなオブジェクトを返します。この属性を使用すると、ウィンドウ間の相互参照を実現できます。たとえば、frames[0] は最初の子ウィンドウを返し、frames[1].frames[2] は 2 番目の子ウィンドウ内の 3 番目の子ウィンドウを返し、parent.frames[1] は親ウィンドウを返します。 . 2 番目の子ウィンドウ。

window.frames の各メンバーの値は、親ウィンドウの iframe タグの DOM ノードではなく、フレーム内のウィンドウ (つまり、フレームの window オブジェクト) であることに注意してください。各フレーム内の DOM ツリーを取得したい場合は、window.frames[0].document を使用する必要があります。

さらに、<iframe> 要素で name または id 属性を設定すると、その属性値は自動的にグローバル変数になり、window.frames プロパティを通じて参照して window オブジェクトを返すことができます。子ウィンドウの。

// HTML コードは <iframe id="myFrame"> です
window.myFrame // [HTMLIFrameElement]
Frames.myframe === myFrame // true

さらに、name 属性の値は自動的に子ウィンドウの名前になり、window.open メソッドの 2 番目のパラメータ、または <a> の ​​target属性として使用できます。 および <frame> タグ。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章