ウィンドウ、フレーム、ダイアログボックスにおける機能

  • [アーティクル]
Working with Windows, Frames, and Dialogs Working with Windows, Frames, and Dialogs *
*前のトピック: ドキュメントオブジェクトモデル
*次のトピック: エレメントとコレクションにおけるスクリプト記述

ウィンドウ、フレーム、ダイアログボックスにおける機能

Microsoft® Internet Explorerでは、HTMLドキュメントを開くときは必ずwindowオブジェクトを作成する。windowオブジェクトはオブジェクトモデルの最上位に位置するので、これを使ってオブジェクトモデルでのプロパティやサブオブジェクトにアクセスすることで、ドキュメントの内容を動的に変更できる、次のトピックでは、windowオブジェクトの使用方法、新しいwindowオブジェクトの作成方法、特別な型のwindowオブジェクトの作成方法について説明する。

複数のウィンドウやフレームを扱うスクリプト記述に関する問題については、フレーム間のスクリプト記述とセキュリティを参照すること。セキュリティを考慮するために、スクリプトがウィンドウを越えてアクセスすることには制限が加えられる。このセクションでは、スクリプトから行える処理と行えない処理を説明している。

  • windowオブジェクトの利用
  • フレームの作成と利用
  • モーダル ダイアログボックスの作成と使用
  • ヘルプ ウィンドウの表示

windowオブジェクトの利用

windowオブジェクトは、オブジェクト階層のルートである。オブジェクトモデルの全プロパティは、windowオブジェクトのプロパティとして、または、これらのプロパティのプロパティとしてアクセスできる。例えば、windowオブジェクトのdocumentプロパティでドキュメントにアクセスする。プロパティを持つプロパティはオブジェクトやサブオブジェクトと呼ばれることもあり、documentプロパティはdocumentオブジェクトとしても呼ばれる。windowオブジェクトが持つプロパティについては、DHTMLリファレンスのプロパティを参照すること。

windowオブジェクトでは、プロパティのプレフィックスとしてwindowキーワードを省略でき、付ける必要はない。しかし、スクリプトは、できる限り明解で読みやすい方が好まれるので、キーワードを使う人が多い。例えば、 

status = "hello";

と 

window.status = "hello";

は同じことで、現在のwindowオブジェクトを参照する。

windowオブジェクトの多くのプロパティは、メッセージの表示、入力プロンプト、新しいドキュメントのロード、など単純な作業を実行するために使用される。例えば、alertメソッドを使うと、単純なモーダル ダイアログボックスを表示できる。また、statusプロパティを使うと、Internet Explorerのステータスバーに表示されるメッセージを変更できる。次に例を示す。 

<HTML>
<HEAD><TITLE>A Simple Document</TITLE>
<SCRIPT LANGUAGE="JScript">
function doAlert() {
window.status = "Page is loaded!";
alert("Page is loaded!");
}
</SCRIPT>
</HEAD>
<BODY onload="doAlert()">
<P>This is a very short document.
</BODY>
</HTML>

新しいドキュメントをウィンドウにロードするには、navigateメソッドやlocationオブジェクトを使用できる。このアクションは、新しいドキュメントをロードするためにユーザーがリンクをクリックすることと似ているが、スクリプトから実行できる。navigateメソッドを使い、（setTimeoutメソッドによって）60秒後に"sample.htm"という新しいドキュメントをロードする例を次に示す。 

window.setTimeout("window.navigate('sample.htm')", 60000);

現在のドキュメント中でナビゲートするには、locationオブジェクトを使うことができる。次の例は、現在のドキュメント中の"sample"というアンカーにジャンプする。 

window.location.hash="#sample";

一度に複数のwindowオブジェクトを扱うことができる。例えば、ブラウザは、ドキュメントで定義されたフレームごとに1つのwindowオブジェクトを作成する。スクリプトから見た場合、現在のwindowオブジェクトは常に、スクリプトを含むドキュメントのwindowオブジェクトである。現在のwindowオブジェクト以外のwindowオブジェクトにアクセスするには、ウィンドウに対する参照を指定することで行う。window.openメソッドは、新しいウィンドウに対する参照を返し、これを使うことで以後スクリプトから新しいウィンドウのプロパティやメソッドにアクセスする。

window.openメソッドを使った次の例は、ユーザーがボタンをクリックするとウィンドウを開き、ドキュメント"sample.htm"をロードする。 

<HTML>
<HEAD><TITLE>Creating a Window</TITLE>
</HEAD>
<BODY>
<P><BUTTON onclick="window.open('sample.htm')">Open Sample</BUTTON>
</BODY>
</HTML>

新しいウィンドウはInternet Explorerの別のインスタンスであり、作成されたwindowオブジェクトは元のwindowオブジェクトとは異なる。新しいウィンドウは、現在のウィンドウ中のスクリプトから参照できる。新しいウィンドウを作成してドキュメント"sample.htm"をロードし、新しいウィンドウのドキュメントタイトルを元のウィンドウのステータスバーに表示する例を次に示す。 

var new_window = window.open("sample.htm");
if (new_window != null)
window.status = new_window.document.title;

一度ウィンドウを作成すると、navigateメソッドやlocationオブジェクトによって新しいドキュメントをロードしてから、closeメソッドによるウィンドウを閉じるまで様々な方法で管理できる。ウィンドウを閉じるとは、ドキュメントをアンロードし、Internet Explorerのそのインスタンスを閉じることである。

また、スクリプトから新しいウィンドウにアクセスしようとする場合、事前にそのウィンドウが閉じられているかどうかを常に確認すべきである。closedプロパティを使えば、ウィンドウが閉じられるときにtrueを返すので、これをチェックできる。

openメソッドを使ってウィンドウを作成する際、オプションの2番めのパラメータを使うと、そのウィンドウに名前を割り当てられる。この名前はリンクのTARGET属性として利用できる。次の例は、"Sample"という名前を割り当てたウィンドウを作成する。2つのリンクにはTAGET属性に"Sample"が設定されているので、このウィンドウにドキュメントがロードされる。 

<HTML>
<HEAD><TITLE>Linking to Sample</TITLE>
</HEAD>
<BODY onload="window.open('sample.htm','Sample')">
<P>Click the following links to view the documents in the Sample window:
<P><A HREF="abc.htm" TARGET="Sample">All About Abc</A>
<P><A HREF="xyz.htm" TARGET="Sample">Some Words on Xyz</A>
</BODY>
</HTML>

デフォルトでは、openメソッドは、デフォルトの幅や高さ、標準的なメニューやツールバー、さらにこの他のInternet Explorerの機能を持つウィンドウを作成する。オプションの3番目のパラメータを使うと、この機能のどれかを変更できる。このパラメータは、1つ以上の機能設定（ウィンドウの大きさと位置の設定を含む）を設定する文字列である。例えば、200×400ピクセルの大きさで、ツールバー非表示、メニューバー非表示、アドレスバー非表示、ステータスバー表示のウィンドウを作成するには、次のように記述する。 

window.open("sample.htm",null,
"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

ウィンドウの機能についての詳細は、openメソッドを参照すること。

フレームの作成と利用

フレームはHTMLドキュメントを構成し構築する方法であり、Internet Explorerのメインウィンドウ内にユーザーに表示する複合ビューを作成できる。各フレームはメインウィンドウ内にある独立したウィンドウなので、windowオブジェクトを使うとフレームの内容にアクセスできる。

IFRAMEエレメントや、FRAMESETエレメントおよびFRAMEエレメントを使用すると、フレームを作成できる。例えば、次のドキュメントでは、メインウィンドウを左右に分割し、同じ大きさの矩形のフレームを2つ作成する。 

<HTML>
<HEAD><TITLE>Two Equal Frames</TITLE>
</HEAD>
<FRAMESET COLS="50%,*">
<FRAME SRC=x.htm>
<FRAME SRC=y.htm>
</FRAMESET>
</HTML>

フレーム内のドキュメント（上記の例では"x.htm"ドキュメントと"y.htm"ドキュメント）でも、メインウィンドウのドキュメントと同様にwindowオブジェクトを使える。つまり、framesetドキュメント（メインウィンドウ）のdocumentオブジェクトとeventオブジェクトにアクセスでき、このframesetドキュメントで実行するスクリプトを記述できる。注意すべき点は、framesetドキュメント内でスクリプトを使う場合や、framesetドキュメントからOBJECTをインスタント化する必要のある場合、HEADセクションで定義しなくてはならないことである。また、BODYエレメントとFRAMESETエレメントはどちらか一方しか実行されない点にも注意すること。1つのドキュメントで両方を使うと、最初のOBJECTがインスタンス化され、次のOBJECTは無視されることになる。オーサーの多くは、BODYエレメントで背景色を設定した後に、FRAMESETをインスタンス化する。Internet Explorer 4.0ではBODYをインスタンス化し、FRAMESETを無視する。背景色の設定をFRAMESETに移し、このドキュメントからBODYを削除した後で初めて、ブラウザはFRAMESETを期待したようにインスタンス化する。

また、parentプロパティとframesコレクションを使うことで、フレームを作成したウィンドウ（親ウィンドウ）と各フレームのウィンドウにアクセスできる。次のJScriptの例では、各フレームのドキュメントのURLを表示するためにこれらを使用している。 

for (i=0; i<window.parent.frames.length; i++)
alert("Frame #" + i + " contains: " + window.parent.frames(i).location);

framesコレクションには各フレームのwindowオブジェクトがあるので、現在のウィンドウと同様に、これらのオブジェクトでも同じプロパティやメソッドを使用できる。例えば、framesコレクションを使って他のフレームのドキュメントにあるコンテントにアクセスできる。次にこの例として、各ドキュメントのタイトルを表示する。 

for (i=0; i<window.parent.frames.length; i++)
alert("The title of frame #" + i + " is: " + window.parent.frames(i).document.title);

注　フレーム間のセキュリティによって、スクリプトは同じドメインからロードされたドキュメントしかアクセスできない。domainプロパティを使うと、ドキュメントのドメインを決定、設定できる。フレーム間のセキュリティとスクリプト記述の注意事項については、フレーム間のスクリプト記述とセキュリティを参照すること。

framesコレクションも、documentオブジェクトと同様にこの方法で機能する。この場合、ドキュメントのframesコレクションには、ドキュメントのIFRAMEエレメントにより作成されたフレームすべてに対するwindowオブジェクトがある。次の例で考えてみよう。 

<HTML>
<HEAD><TITLE>Two Floating Frames</TITLE>
<SCRIPT>
function showFrames() {
for (i=0; i<window.document.frames.length; i++)
alert("The title of frame #" + i + " is: " +
window.document.frames(i).document.title);
}
</SCRIPT>
</HEAD>
<BODY onload="showFrames()">
<IFRAME SRC="x.htm" ALIGN=LEFT></IFRAME> Here's some text to the right of a frame.
<BR CLEAR=LEFT>Here's some text beneath the frame.
<BR>
<IFRAME SRC="y.htm" ALIGN=RIGHT></IFRAME> Here's some text to the left of a frame.
<BR CLEAR=RIGHT>Here's some text beneath the frame.
</BODY>
</HTML>

上記の例では、片方は左寄せに、もう一方は右寄せに配置されたフローティングフレームが表示される。ドキュメントが一度ロードされてしまうと、"showFrames"関数はframesコレクションを使って各フレームにアクセスし、対応するドキュメントのタイトルを返すダイアログボックスを表示する。

openメソッドを使って作成したウィンドウとは違い、フレームのウィンドウを閉じることはできない。フレームを作成したウィンドウがアンロードされると、そのフレームは"閉じられる"。また、statusプロパティなど、メインウィンドウにしか適用されないプロパティでは、フレームウィンドウには何の効果も与えられない。フレームにはステータスバーが存在しないので、statusの取得や設定を行っても無駄である。ステータスバーを設定するには、親のframesetドキュメントにアクセスしなくてはならない。

フレームのwindowオブジェクトへのアクセスは、フレームで作成されたFRAMEエレメントやIFRAMEエレメントにアクセスすることとは同じではない。特に、windowオブジェクトを使ってこれらのエレメントの属性にアクセスすることはできない。その代わり、FRAMEエレメントを含むドキュメントのallコレクションから取得できるエレメント オブジェクトを使用しなけばならない。例えば、フレームからスクロールバーを消す場合、IFRAMEエレメントのscrollingプロパティを次のように設定しなくてはならない。 

document.all.tags("IFRAME").item(1).scrolling="no";

エレメント オブジェクトとそのプロパティの詳細については、エレメントとコレクションにおけるスクリプト記述を参照すること。

モーダル ダイアログボックスの作成と使用

ダイアログボックスは、windowオブジェクトのshowModalDialogメソッドを使って作成する特別なウィンドウである。現在のウィンドウの情報を明らかにして、ユーザーからの入力を求める場合に役立つ。また、作業の前にユーザーが行うか承諾すべき重要情報を表示する場合にも役立つ。

showModalDialogメソッドは、HTMLドキュメントのURLを取得して新しいウィンドウを表示するopenメソッドと似ている。主な違いは、ダイアログボックスがモーダルであるということである。これは、ダイアログボックスが閉じられるまで、入力フォーカスを解放しないということを意味する。そのため、ユーザーは、ダイアログボックスを閉じるまで、ダイアログボックスを作成したウィンドウに戻ることはできない。しかし、この機能により、ユーザーが他のウィンドウやアプリケーションへ切り替えることを防ぐことができる。

通常、ボタンのクリックやメニュー項目の選択といったユーザーの入力に対応して、ダイアログボックスを作成する。次の例では、BUTTONエレメントのonclick属性から直接showModalDialogメソッドを呼び出している。 

<BUTTON onclick="window.showModalDialog('dialog.htm')">Search</BUTTON>

上記の例では、標準のダイアログボックスを作成し、そのウィンドウに"dialog.htm"ドキュメントをロードしている。

有効なHTMLエレメントであればダイアログボックスにロードできるが、ほとんどのダイアログウィンドウのドキュメントには、ユーザーアクションや入力を指示するための1つ以上のコントロールがある。例えば、次の例は、ユーザーに文字列を入力させるtextコントロールと、［OK］および［Cancel］ボタンを提供するダイアログボックスの例である。 

<HTML>
<HEAD><TITLE>Search For</TITLE>
<SCRIPT LANGUAGE="JScript">
function doOK() {
window.returnValue = window.document.all.MySearch.value;
window.close();
}
function doCancel() {
window.returnValue = "";
window.close();
}
</SCRIPT>
</HEAD>
<BODY>
<P><B>Search For:</B> <INPUT ID=MySearch TYPE=text>
<CENTER>
<BUTTON onclick="doOK()">OK</BUTTON>&nbsp;
<BUTTON onclick="doCancel()">Cancel</BUTTON>
</CENTER>
</BODY>
</HTML>

上記の例では、ダイアログボックス上の（"MySearch"で識別される）textコントロールに文字列を入力し、［OK］ボタンか［Cancel］ボタンをクリックする。［OK］ボタンをクリックすると"doOK"関数が呼び出される。"doOK"関数では、textコントロールに入力されたテキストを読み出し、returnValueプロパティにその値を代入する。［Cancel］ボタンをクリックすると、"doCancel"関数が呼び出される。"doCancel"関数では、このプロパティに空の文字列をを代入する。そして、この後、どちらの関数でもcloseメソッドを呼び出してダイアログボックスを閉じ、元のウィンドウに入力フォーカスを返す。

ダイアログボックスが閉じた後、windowオブジェクトのreturnValueプロパティにはshowModalDialogメソッドから返された値が設定される。ダイアログウィンドウのドキュメントでreturnValueプロパティを設定しておけば、元のウィンドウにダイアログボックスの情報を返すことができる。次の例は、元のウィンドウでダイアログボックスでの入力を受け取る方法である。"search.htm"は、ダイアログウィンドウのドキュメントのファイル名である。 

function doSearch() {
var str = showModalDialog("search.htm");
if (str == "")
return;    // user canceled search
else {
// search for the string
}
}

showModalDialogの2番目のパラメータを使うと、ダイアログウィンドウに引数を渡せる。このパラメータはあらゆる有効な型を受け取れるので、個別の型と同じくらい容易に配列を受け渡せる。 

var aCafeArgs = new Array("Tall", "Decaf", "Non-fat", "Mocha");
var cResult = window.showModalDialog("barista.htm", aCafeArgs);

ダイアログボックスでは、windowオブジェクトのdialogArgumentsプロパティによって引数を読み出せる。引数を渡すことは、元のウィンドウからダイアログボックスのコントロールの初期値を指定するために役立つ方法である。例えば、検索ダイアログボックスを考えてみよう。次の例は、ダイアログウィンドウのドキュメントがロードされたときの、検索文字列の初期値を元のウィンドウから渡された値に設定している。BODYエレメントのonloadイベントによるスクリプト記述で、引数を渡す関数（doInit）を呼び出している。 

function doInit() {
if (window.dialogArguments != null)
window.document.all.MySearch.value = window.dialogArguments;
}
.
.
.
<BODY onload="doInit()">

検索文字列の初期値を"Sample Text"という文字列に設定したい場合、元のウィンドウのドキュメントでshowModalDialogメソッドを使って、次のように指定する。 

var str = showModalDialog("search.htm", "Sample Text");

これだと、ダイアログボックスには"Sample Text"という値しか渡せない。引数渡しのもっとうまい方法は、ダイアログウィンドウから返された値を、元のウィンドウのドキュメント中の変数に格納することである。次に例を示す。 

var str = "";
function doSearch() {
str = showModalDialog("search.htm", str);
if (str == "")
return;    // user canceled search
else {
// search for the string
}
}

これだと、ダイアログウィンドウから返された文字列をグローバル変数に格納することで、ユーザーが再検索を行うとき必ず直前の検索文字列を利用できるようになる。ただし、格納された値は、ダイアログウィンドウのドキュメントあるいは元のウィンドウのドキュメントをアンロードすると、いずれも破棄される。

またこの他、focusメソッドを使うと、ダイアログボックスの特定コントロールに入力フォーカスを設定できる。この方法を使うと、ダイアログウィンドウのドキュメントがロードされると自動的に、指定したコントロールにフォーカスが移動するようになる。通常、入力フォーカスがダイアログウィンドウに初期値を設定するのと同じ関数で設定できる。textコントロールにフォーカスを設定するには、次の記述を行う。 

window.document.all.MySearch.focus();

ダイアログボックスで複数の値を指定するような場合、元のウィンドウとダイアログウィンドウとの引数の受け渡しはオブジェクトを渡すことで行う。次の例は、"Match Case"チェックボックスと検索文字列の2つの入力があるダイアログボックスである。ユーザー入力を受け取るために、元のウィンドウからは、ユーザーが［OK］ボタンか［Cancel］ボタンを押したときに、ダイアログウィンドウが設定するオブジェクトを渡す。 

<HTML>
<HEAD><TITLE>Search For</TITLE>
<SCRIPT LANGUAGE="JScript">
function doInit() {
if (window.dialogArguments != null) {
window.document.all.MySearch.value = window.dialogArguments.str;
window.document.all.MatchCase.checked = window.dialogArguments.caseSensitive;
}
window.document.all.MySearch.focus();
window.returnValue = false;
}
function doOK() {
window.returnValue = true;
if (window.dialogArguments != null) {
window.dialogArguments.str = window.document.all.MySearch.value;
window.dialogArguments.caseSensitive =
window.document.all.MatchCase.checked;
}
window.close();
}
function doCancel() {
window.returnValue = false;
window.close();
}
</SCRIPT>
</HEAD>
<BODY onload="doInit()">
<INPUT ID=MatchCase TYPE=checkbox>&nbsp;<B>Match Case</B>
<P><B>Search For:</B> <INPUT ID=MySearch TYPE=text>
<CENTER>
<BUTTON onclick="doOK()">OK</BUTTON>&nbsp;
<BUTTON onclick="doCancel()">Cancel</BUTTON>
</CENTER>
</BODY>
</HTML>

上記の例のダイアログボックスを使用する際の注意点は、オブジェクトの宣言とその初期化が必須なことである。次の例は、元のウィンドウでshowModalDialogを呼び出す前に、"myDialog"オブジェクトを宣言してそのオブジェクトを初期化している。 

function myDialog() {
var str;
var caseSensitive;
}
function doSearch() {
myDialog.str = "";
myDialog.caseSensitive = false;
if (showModalDialog("search.htm", myDialog)==false)
return;    // user canceled search
else {
// search for the string
}
}

元のウィンドウとダイアログウィンドウとの間で複数の値を受け渡す別の方法としては、これらの値を1つの文字列に連結し、文字列を解析して値を抽出できるようにドキュメント中に置いておくことである。

ダイアログボックスの外観と大きさは、showModalDialogメソッドの3番目のパラメータで設定できる。次の例は、幅10em、高さ10emで、10ピクセルのフォントサイズ（デフォルト）を使うダイアログボックスを作成する。 

window.showModalDialog("dialog.htm",null,
"font-size:10px;dialogWidth:10em;dialogHeight:10em")

上記の例から、3番目のパラメータには、複数の設定をセミコロン(;)で区切った文字列を指定できることが分かる。各設定には、コロン(:)や等号(=)で区切られ、名前と値が含まれる。値は外観を決定する。値が数値の場合は、"px"や"em"のような単位を付ける。

dialogWidthやdialogHeightを使うと、ダイアログボックスの幅と高さの初期値を設定できる。同様に、dialogLeftやdialogTopを使うと、デスクトップの左上隅（親ウィンドウではない）からの相対位置で、ダイアログボックスを開く位置を指定できる。なお、centerキーワードを使うとデスクトップ中央にダイアログボックスを配置できる。

通常、ダイアログボックスの位置、幅、高さは親ドキュメントで設定するが、dialogLeft、dialogTop、dialogWidth、dialogHeightプロパティを使うと、ダイアログボックス自体からこれらの設定を読み出して変更できる。例えば、ダイアログボックスのコンテントを拡張して、ユーザー選択オプションを追加したような場合などに必要となる。

font、font-size、font-weight、font-styleを使うと、ダイアログボックスのテキストに対して、デフォルトの書体、サイズ、太さ、スタイルを設定できる。これらは、同じ名前のCSS属性として同じ値を受け取る。フォント設定がされていないダイアログボックスのテキストは、デフォルト設定が適用される。

ヘルプ ウィンドウの表示

windowオブジェクトのshowHelpメソッドを使うと、ブラウザのヘルプファイルを表示できる。次の例では、HTMLヘルプファイルを表示するヘルプウィンドウを作成する。HTMLHelpには変更可能な引数はなく、新しいウィンドウはデフォルトの形で表示される。 

<BUTTON onclick="window.showHelp('helpinfo.htm')">Show Help</BUTTON>

また、showHelpメソッドはWinHelpファイルの表示にも使える。WinHelpファイルを表示するには、このメソッドの最初のパラメータに.hlpファイルを指定し、2番目のパラメータにコンテキスト識別子を指定する。そして、3番目のパラメータ（オプション）には、"popup"を指定する。ヘルプファイルは、デフォルトでは、ブラウザウィンドウに表示される。WinHelpファイルに対する"popup"を指定すると、ヘルプファイルは別のウィンドウで表示される。

Up トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.