JavaScript Window Object

Previous Table of Contents Next
JavaScript Math Object JavaScript Document Object

Purchase and download the full PDF version of this JavaScript eBook for only $8.99

JavaScript windowオブジェクトはJavaScriptオブジェクト階層の上部にあり、ブラウザウィンドウ(または複数のブラウザウィンドウが一度に開いている場合はウィンドウ)を表します。 この章まではJavaScriptの内部構造と構文に焦点を当ててきました。 この章では、(結局のところ、JavaScriptの主な目的の一つである)画面上で物事を実現するために開始されます。 Windowオブジェクトを使用すると、開発者はブラウザウィンドウの開閉、警告ダイアログとプロンプトダイアログの表示、タイムアウトの設定(指定された期間の後に実行されるアクションの指定)などのタスクを実行できます。 タイムアウトはwindowオブジェクトの機能ですが、この章ではなく、JavaScriptのタイムアウトの章でそれらをカバーします。

Contents

JavaScriptウィンドウオブジェクトを参照する

JavaScriptオブジェクトの基本で説明されているように、オブジェク たとえば、次のスクリプトフラグメントは、documentオブジェクトのwrite()メソッドにアクセスします。

document.write("Hello");

windowオブジェクトは、オブジェクト階層の最 そのため、オブジェクトのメソッドやプロパティがスクリプト内でオブジェクト名とドットの接頭辞なしで参照されると、JavaScriptはwindowオブジェクトのメ これは、例えば、ウィンドウalert()メソッドを呼び出してアラートダイアログを表示するときにウィンドウを意味します。 接頭辞は必須ではありません。 したがって、次のメソッド呼び出しは同じことを達成します:

window.alert();alert()
Ezoicこの広告を報告

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

JavaScriptウィンドウオブジそして、スクリプトで使用されます:

  • ウィンドウ。closed-複数のウィンドウを処理するときに使用され、このプロパティは、ウィンドウが閉じられているかどうかを示します。
  • ウィンドウ。defaultstatus/ウィンドウ。status-defaultstatusブラウザのステータスバーに表示されるデフォルトのメッセージを指定します。 statusは、デフォルトの代わりにブラウザーのステータスバーに表示する一時的なメッセージを指定します。 多くのブラウザで無効になっています。
  • ウィンドウ。frames-ウィンドウにフレームが含まれている場合、この配列はframeオブジェクトの配列を保持します(配列へのアクセスに関するJavaScript配列の詳細を参照)。
  • window.name -スクリプトによって開かれたウィンドウには名前を付ける必要があります。 このプロパティには、対応するwindowオブジェクトの名前が含まれます。
  • ウィンドウ。opener-別のウィンドウに含まれるスクリプトでウィンドウが開かれた場合、子ウィンドウのこのプロパティには、それを開いた参照ウィンドウが含
  • ウィンドウ。parent-ウィンドウ内のフレームを操作する場合、このプロパティにはフレームを含むwindowオブジェクトへの参照が含まれます。
  • ウィンドウ。screen-ウィンドウが表示されている画面に関する情報を含むオブジェクト(このオブジェクトに含まれるプロパティには、height、width、availHeight、availWidth、colorDepthが含まれます)。
  • ウィンドウ。self-現在のウィンドウへの参照。
  • ウィンドウ。top-フレームを操作するときの最上位ウィンドウへの参照。

JavaScriptを使用してブラウザウィンドウを開く

新しいブラウザウィンドウは、windowオブジェクトのopen()メソッドを使用してJavaScriptスクリプトか 新しいウィンドウを開くための構文は次のとおりです。

newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");

open()メソッドに渡される引数の説明を以下に示します。

  • URL-新しいウィ URLが指定されていない場合は、空白のウィンドウがロードされます。
  • WindowName-ウィンドウ名を指定し、ウィンドウを参照するために使用されます。
  • features-ウィンドウの外観をカスタマイズできる機能のカンマ区切りのリスト。 オプションは次のとおりです:

ブラウザステータスバーかどうか

設定 説明
ブラウザクライアントウコンテンツ領域のサイズについてはinnerheightを参照)
innerwidth ウィンドウコンテンツ領域の初期幅を指定します
innerheight ウィンドウコンテンツ領域の初期高さを指定します
innerheight ウィンドウコンテンツ領域の初期高さを指定します
innerheight ウィンドウコンテンツ領域の初期高さを指定します
innerheight ウィンドウコンテンツ領域の初期高さを指定します
innerheight エリア
outerWidth ナビゲータウィンドウの初期幅を指定します
outerHeight ナビゲータウィンドウの初期高さを指定します
ツールバー ウィンドウにブラウザツールバーを含めるかどうかを指定します
ステータス ウィンドウにブラウザツールバーを含めるかどうかを指定します
ウィンドウにブラウザツールバーを含めるかどうかを指定します ウィンドウにブラウザツールバーを含めるかどうかを指定します ウィンドウにブラウザツールバーを含めるかどうかを指定します
ステータス ウィンドウにブラウザツールバーを含めるかどうかを指定します
依存 ウィンドウが親ウィンドウと一斉に閉じるかどうかを指定
メニューバー ウィンドウが親ウィンドウと一斉に閉じるかどうかを指定します。 ブラウザメニューバーを含む
場所 ウィンドウにブラウザの場所/URLボックスを含めるかどうかを指定します
スクロールバー ブラウザの水平/垂直スクロールバーを非表示/表示します
サイズ変更可能 ユーザーが表示された後にウィンドウのサイズを変更する権利があるかどうかを指定します。
ディレクトリ ウィンドウにブラウザの個人用ツールバーを含めるかどうかを指定します。
copyHistory 新しいウィンドウに呼び出しウィンドウのURL履歴のコピーを含めるかどうかを指定します
left 画面の左側から新しいウィン
alwayslowered 常に他のブラウザウィンドウの下に配置された新しいウィンドウを作成します。 広告の下でそれらの迷惑な破裂音のために頻繁に使用される。
alwaysRaised 常に画面上の他のブラウザウィンドウの上に配置された新しいウィンドウを作成します。
z-lock 他のブラウザウィンドウとの関係でブラウザが表示されるレベルをロックします。

高さ、幅、位置の機能は数値を使用して設定されます。 残りの機能オプションは、trueまたはfalse値を使用して設定できます(yes、no、およびtrueおよびfalseの代わりに1および0を使用することもできます)。 不在の属性はfalseと見なされます。 次の例では、メニューバー、特定のディメンション、ツールバーなしで新しいウィンドウを作成します。

newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");

JavaScriptを使用してブラウザウィンドウを閉じる

ウィンドウは、windowオブジェクトのclose()メソッドを使用して閉じることができます。 ウィンドウの名前(open()メソッドで指定)は、適切なウィンドウを確実に閉じるために、closeを実行するときに参照する必要があります。 たとえば、次のコードは新しいウィンドウを作成し、クリックすると新しいウィンドウを閉じる押ボタンを作成します:

<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Close Window" onclick="newWindowObj.close()" /></form>

現在のウィンドウオブジェクトのopenerプロパティを使用して、現在のウィンドウを開いたウィンドウを閉じることもできます。

window.opener.close()

これは、上記のスクリプトが実行されているウィンドウを開いたウィンドウを閉じます。

ウィンドウの移動とサイズ変更

ウィンドウは、x座標とy座標を引数として取るwindowオブジェクトのmoveTo()メソッドを使用して、画面上の特定の座標に移動することができます。 次の例では、”ウィンドウの移動”ボタンが押されたときに、新しいウィンドウを画面上の場所100、200に移動します:

<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>

特定の新しい場所にウィンドウを移動することに加えて、JavaScriptウィンドウオブジェクトのmoveBy()メソッドを使用して、画面上の現在の場所 もう一度、メソッドは、指定されたウィンドウの現在のx座標とy座標に追加されたx値とy値を受け取ります。 負の値は、移動の方向を変更するために使用できます:

<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>

ウィンドウresizeTo()とresizeBy()メソッドは、ウィンドウのサイズを特定のサイズに変更するか、現在のサイズに関連する新しいサイズに変更

ウィンドウフォーカスの変更

ウィンドウが画面上で現在選択されているウィンドウである場合、フォーカスがあると言われます。 通常、ウィンドウ内でマウスポインタでクリックすると、そのウィンドウにフォーカスが与えられます。 JavaScriptでは、focus()メソッドとblur()メソッドを使用して、プログラムでウィンドウのフォーカスを変更することができます。 次の例では、新しいウィンドウを表示し、開いているウィンドウにフォーカスがあるようにぼかし、新しいウィンドウにフォーカスを切り替えるボタンを提供します。

<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");newWindowObj.blur();</script><form action="null"> <input type="button" value="Focus New Window" onclick="newWindowObj.focus()" /></form>

メッセージボックスダイアログの表示

JavaScript windowオブジェクトは、アラート、確認、プロンプトダイアログの三つのタイプのメッセージダイアログを表示するメソッドを提供します。

  • alert-ユーザーにメッセージを表示することを目的としています。 これには、警告メッセージが表示されるメッセージ領域と、ユーザーがクリックしてダイアログを閉じることができる”OK”ボタンが含まれています。 Alert()メソッドは、ダイアログに表示されるメッセージを表す単一の引数を取ります。 次のwebページフラグメントは、”警告を表示”ボタンをクリックすると、”有効なパスワードがありません”というメッセージを含む警告ダイアログを表示します。
<form action="null"> <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" /></form>
  • 確認-ユーザーからyesまたはnoの応答を取得する必要がある場合に使用されます。 このダイアログの種類は、メッセージと”OK”と”キャンセル”ボタンで表示されます。 Confirm()メソッドは、ユーザーに表示されるメッセージを引数として受け取り、ユーザーが”OK”または”Cancel”を押したかどうかに応じてtrueまたはfalseを返します。
<script language="JavaScript" type="text/javascript">function showConfirmation(){ var result = confirm("Would you like to continue?"); if (result) document.write("Continue"); else document.write("Do not continue");}</script><form action="null"> <input type="button" value="Show Confirmation" onclick="showConfirmation()" /></form>
  • prompt-ユーザーから情報を取得できるように設計されています。 このダイアログは、ユーザーへのメッセージ、データ入力用のテキスト入力フィールド、およびOKボタンとCancelボタンで構成されています。 Prompt()メソッドは、表示されるメッセージを引数として受け取り、ユーザーが入力した値を返します:
<script language="JavaScript" type="text/javascript">function showPrompt(){ var userInput = prompt("Please enter your name:"); document.write("Hello, " + userInput);}</script><form action="null"> <input type="button" value="Show Prompt" onclick="showPrompt()" /></form>

このJavaScript eBookの完全なPDFバージョンを購入してダウンロードします。99

Previous Table of Contents Next
JavaScript Math Object JavaScript Document Object

コメントを残す

メールアドレスが公開されることはありません。