初心者のJavaScript ウィンドウ(Window)オブジェクト [ ARTEMIS ]

Window

Windowオブジェクトはドキュメント(ページ)を表示しているウィンドウです。
ほとんどすべてのオブジェクトの最上層にあたります。
記述上では windowは省略してかまいません。
このJavaScript解説は NN3レベルからを考えていますので、
ここでは全てのプロパティなどについては解説しませんので。

Frameオブジェクト

Windowオブジェクトの下層で historyとlocation は別で説明しています。

◆ページ解説を作らなかった frame オブジェクトについてですが
フレームはフレームウィンドウでありフレームウィンドウが
個々のウィンドウオブジェクトとなります。
ですからこのページでついでに解説しておきます。
JavaScriptは記述されているページを基準Windowとして考えます。

■ 自分が一番上 or 自分より下の子フレームウィンドウ ■
自分より下のフレームに対してオブジェクトとして指定する時は
framesと言うフレームの配列を使うか
フレーム定義で指定してあるNAME属性を指定します。
フレーム定義ファイルが２つフレームを定義していて
その2つの名前がそれぞれ MENU と MAIN とすると
1つ目の MENUフレームがwidnow.frames[0] 又は、window.MENU となります。
2つ目の MAINフレームがwindow.frames[1] 又は、window.MAIN となります。
これらの名前はそのフレームのウィンドウそのものを指す windowオブジェクトで
それらの下層にlocationやhistory、frame、document 等をもっています。
window.frames[0].location.href // MENUフレームのlocationのURL
ちなみに windowは通常省略しますから、frames[0]、MENU などが
フレームウィンドウのwindowオブジェクト自体をを指す言葉になります。

■ 自分の親にあたるウィンドウ ■
自分を定義している親のウィンドウをオブジェクトとして指す時は
window.parentと書きます。
これで自分を定義しているフレーム定義ファイルを指す事になりますので window.parent.location.hrefは親の定義ファイルのURLと言う事になります。

■ 自分の兄弟にあたるウィンドウ ■
1つ前の例では MENU、MAINから見るとそれぞれが自分の兄弟になります。
兄弟を指す言葉はないので、『自分の親の子』という呼び方をします。
MENU、MAINフレームそれぞれから見た場合
window.parent.frames[0] // MENUフレームウィンドウ
window.parent.MENU // MENUフレームウィンドウ
window.parent.frames[1] // MAINフレームウィンドウ
window.parent.MAIN // MAINフレームウィンドウ

兄弟にあたるウィンドウがフレームを含んでいるとすると
そのフレームオブジェクトを指すには次のようになります。
window.parent.frames[0].frames[0]
構造が複雑になればなるほど、フレーム構成の枝別れを
頭に整理してイメージしてオブジェクト指定してください。

■ ブラウザ上のURLとして表示される、一番上のウィンドウ ■
window.topと書きます。
これが一番上の階層にあるウィンドウです。
フレームが複雑になると兄弟なのか、甥なのかとかわから無くなります。
自分から見てと言うのに無理が出てくるので、まず一番ご先祖である
最も上に戻りそこからフレーム分岐を辿って指定したりします。
これなら間違いが起こりにくくなります。
window.top.frames[0].frames[0]のようになりますね。
親parentが最上層なら、parentとtop は同義語になります。

先ほども書いたように windowは省略して書くので
top.location とか parent.frames[1] のように書かれます。
例えばページを他人のURLへジャンプさせる場合等は
top.location.href= "URL"; となります。

■ 自分自身のウィンドウ ■
あえて書く必要はないのですが、状況によっては書かないとまずい場合等があります。
そのような時に自分自身を指す場合は window.self と書きます。

Window Objectの主要プロパティ

window の主要なプロパティと使い方です。
JavaScript1.1レベルではそんなに多くありませんが、
NN4以上での 1.2、1.3レベルではもっと多くの情報が取れます。
しかし、これらはNetscapeが採用している物で IEでは
windowオブジェクト以外も含めて別の方法で実現させている為
かなりの違いが出てきています。
ここではなるべく1.1レベルの共通で使えるもにとどめます。

window.length

[R] 子ウィンドウの数

このウィンドウの子ウィンドウがあればその数を返します。
無い場合は0 です。Netscapeでは子ウィンドウを持つと言う事は
フレーム定義ファイルであるわけですが、IEでは IFRAMEタグで
インラインでフレームを使えます。
ちなみに子ウィンドウと言う事は、フレームであると言う事なので
window.lengthと window.frames.length は同じ数で同じ意味になると思います。

例：子ウィンドウがあればframes配列のインデックスと名前を表示

<SCRIPT LANGUAGE="JavaScript">
if(window.frames.length >0){
    for(i=0; i<window.frames.length; i++){
        document.write(i + "=" + window.frames[i].name + "<BR>");
    }
}
</SCRIPT>

結果：このページを表示している top の子フレーム

window.name

[R/W] ウィンドウの名前

フレーム内にあるウィンドウはフレーム定義の FRAMEタグに付けた
NAME属性がそのままウィンドウの名前になっています。
window.name でその名前を確認できます。
しかし、NAME属性を付けなかった場合や、フレームではないウィンドウの場合
指定する時に困る場合等は、window.name に名前を書き込んで名前を付けます。
フレームのNAMEで指定してあっても、スクリプトでwindow.nameを決めると
それを使う事ができます。
他のウィンドウの名前を確認する時
top.frames[0].name 等のようにウィンドウオブジェクトを指定して書きます。
開いたウィンドウの場合は window.nameが指定されていればそれを
NaviBar = window.open() の様に開いた場合は NaviBar.name で名前が取れます。
気を付ける事は windowと言う文字を省略して自分のウィンドウの名前を指定する時は
name = "MAINWINDOW"; と書く事ができてしまいます。
これは変数の宣言と見分けが付きにくくなります。
また、安易に name という変数を作り varステートメントを省いて
name = "Lime";とするとこれはウィンドウの名前定義になってしまうので注意。

window.status

[R/W] ステータスバーの表示

このプロパティを書き換えて、ステータスバーの表示を変える事ができます。
イベントハンドラ onMouseoverなどを使ってリンクの情報表示などによく使います
NetscapeではアンカーのHREF表示より優先させる為に return true が必要です。

<SCRIPT LANGUAGE="JavaScript">
function StatusInfo(n){ window.status = n; }
</SCRIPT>

<A HREF="" onMouseover="StatusInfo('メニュー'); return true;"
 onMouseout="StatusInfo('')">MENU</A>

これで、Mouseoverの時はメニューと言う文字を、Mouseoutの時は空文字を
ステータスバーに表示します。
onMouseoutを付けないと、ステータスバーの表示が変わったままずっとその文字が
表示されつづけてしまいます。
この方法だと、関数は一つで済みますし、over、outの両方に対応できます。
IEもNNもそれぞれの方法で現在のドキュメントを書き換える(ように見せる)事が
できるようになってきました。特にIEでは自在に書換えができます。
ステータスバーは狭いですし多くの情報を表示するには向いていないと思います。

IE4以上では、ほとんどのタグにイベントハンドラを付けられます。
ですから、無駄な例として漢字のふりがなを表示してみます。
例：私はよく顰蹙をかう・・・・。
これは FONTタグに同じようなマウスオーバーをつけています。
IE4以上ではこの様に色々な事ができ、遊びやすいです。

window.defaultStatus

[R/W] デフォルトのステータス表示

通常のステータスバーの表示動作は大体おわかりと思いますが
アンカータグ等の場合にマウスが重なるとそのHREFに設定されている
値(URL)を表示しています。これはブラウザのデフォルトの動作です。
マウスが離れると、何も表示しない状態になります。
この特に命令が来ない時の状態がdefaultStatusです。
ですから、通常は "" の状態で何も表示されません。

<SCRIPT LANGUAGE="JavaScript">
window.defaultStatus = "ARTEMIS";
</SCRIPT>

このページに限って常にステータスバーに ARTEMISと出ているのがわかりますか?
私のページはフレーム構成ですので、他のフレームウィンドウへマウスが行くと
そのフレームの規則に従っていますが、このページのフレームにマウスが来ると
デフォルトの状態で ARTEMIS になっています。
この状態ではFireFoxは無効。

window.opener

[R/W] 自分を開いた親ウィンドウ

これは window.open() という open()メソッドで開かれたウィンドウから見た
自分を開いたスクリプトのあるウィンドウです。
そのウィンドウをオブジェクトとして指す時に、window.openerを使います。
開く指示をしたウィンドウに名前が付いてれば、名前でもOKです。
フレームの場合に topや parentがあるように、これもその仲間です。

通常のページでのデフォルトは Netscapeでは null、IEでは undefinedです。
window.opne()で開かれたウィンドウの場合は、その開いた親を
window object として、オブジェクトになります。
openerがWindow オブジェクトになれば、あとは openerに対して
topやparentと同様な使い方ができます。
例：opener.name で openerの名前を取る

window.closed

[R] ウィンドウが閉じてるか

ウィンドウが閉じてるかどうかをこのプロパティで知る事ができます。
閉じている場合は true、開いている場合は false が値になります。
閉じているかどうか? ですから、当然自分のウィンドウに対しては使いません。
また、フレームのどれかが閉じると言う事はないので、window.open()や
HTMLタグのTARGET="_blank"等で開いた、ウィンドウがどうなっているか?
または、その開かれたウィンドウから見て、親はどうなっているのか?です。
JavaScriptで、すでに閉じられたウィンドウに対して操作しようとすると
最近の新しいブラウザではうまく無視してくれる場合もありますが、
オブジェクトありませんと言うメッセージが出る事があります。
この様な時にきちんと事前に、閉じられてないかどうかをチェックします。

<SCRIPT LANGUAGE="JavaScript">
/* 広告バナー用ウィンドウを開く関数 */
function ComCtrl(){
    NW = window.open("sample.html","COM","WIDTH=468,HEIGHT=60");
	window.setTimeout("ChangeImage()",3000);
}
/* 画像のパスの配列 */
imgs = new Array()
imgs[0] = "artemis.gif";
imgs[1] = "microsoft.gif";
imgs[2] = "netscape.gif";
/* 画像を一定時間で交換 */
var i = 0;
function ChangeImage(){
    if(NW.closed){ComCtrl();}
	else{   NW.document.images["banner"].src = imgs[i];
			if(i<2){ i++;}else{ i=0; }
            setTimeout("ChangeImage()",3000);
    }
}
</SCRIPT>

BODYタグに onLoad="ComCtrl()" を付けて、起動させます。
広告ウィンドウが閉じてると、また開いてバナー広告を表示します。
閉じても閉じても開く、しつこく、やなタイプのバナーです。
これは簡易サンプルですので、出来は良くないです・・。

また、今ではセキュリティ問題も含めてポップアップロックなどもあって無駄にウィンドウを開く事は推奨できません。

Window Objectの主要メソッド

window.open()

ウィンドウを開きます

window.open(URL,名前,詳細)
JavaScriptで新たにウィンドウ(ブラウザ)を開きます。
一般的にはこの開いたウィンドウに対しての操作などもあるでしょうから
var NewW = window.open(); の様にオブジェクトの代名詞となる変数へ
代入する形で開いてあげます。
この様に開いたあとでは、NewW が開いたウィンドウを指す事になりますので
NewW.document 開いたウィンドウのドキュメント
NewW.location 左ウィンドウの現在のlocation

◆URL
URL部分には開いたウィンドウに表示するファイルのURLを書き込みます。
空ウィンドウを開く時は省略します。
通常は、文字列でしょうから "" で囲むようにします。

◆名前
名前部分には、そのウィンドウの名前となる物をを入れます。
これは HTML上のTARGET操作などで使う物になります。
空のままの場合は名前が無い事になりますので注意してください。
window.open()が複数回呼び出された場合に名前が指定されていないと
次々に新しいウィンドウを開きます。名前が指定されていると
その同じ名前のウィンドウが開いていれば、新たに開かず
その名前のウィンドウをターゲットにします。
これも通常文字列でしょうから "" で囲む事になります。

◆詳細
開くウィンドウについての細かな設定ができます。
詳細の中にカンマで区切り様々な内容を入れます。
【 width 】ウィンドウの幅です。200が最低です。最高は画面の幅
【 height 】ウィンドウの高さです 100が最低です。最高は画面の縦幅
【 resizable 】リサイズ可能かどうか。yes| no。デフォルト no
【 toolbar 】ツールバー yes|no
【 location 】ロケーションバー yes|no
【 directories 】yes|no IEではリンク・・・などNNでは新着などがあるバー
【 menubar 】メニューバー yes|no
【 status 】ステータスバー yes|no
【 scrollbars 】スクロールバー yes|no

【 top 】IE4以上のモニター画面上の縦位置。
【 left 】IE4以上のモニター画面上の横位置
【 screenY 】NN4以上のモニター画面上の縦位置。
【 screenX 】NN4以上のモニター画面上の横位置
IE、NN 共に画面の左上が 0,0 です。
両方設定しても、エラーは出ないようなので共用するには両方設定。

その他にもIE専用、NN専用の詳細項目があります。
【 fullscreen 】 yes|no IE専用フルスクリーンモードで開きます。
ALT＋F4で閉じる事ができます。
WindowsでDOS窓を ALT+Enterで切り替えられるのを知らない人がいますが
このIEのフルスクリーン状態を終了させる方法を知らない人も多いようなので
フルスクリーンで開いた場合は閉じ方を書いてあげてください。
今ではフルスクリーンは不可能、或いは制限がかかってると思います。
◆使い方を少し
window.open("test.html","TEST","");
IE4で開くと、普通のブラウザが起ち上がり、test.htmlが表示されます。
NN で開くと、ツールバー等のないウィンドウのみのブラウザが起ち上がります。
両方とも、リサイズはできません。
window.open("test.html","TEST","width=200");
これだと、IEもNNもウィンドウだけのブラウザが起ち上がり立ち上がります。
つまり、IEでは何も設定しないと、普通のブラウザの立ち上げになります。
両方とも yes|noは基本的にデフォルトは no の方になっています。

window.open("test.html","TEST","width=200,height=200,resizable=yes,status=yes");
詳細の部分は全体まとめて "" で囲んでください。
次の例はからウィンドウを開いて、JavaScriptで文字を表示。

<SCRIPT LANGUAGE="JavaScript">
function NaviOpen(){
NW = window.open("","TEST","width=300,height=300");
NW.document.open();
NW.document.write("<HTML><BODY>");
NW.document.write("<CENTER><FONT COLOR='#990000'>ARTEMIS</FONT>");
NW.document.write("</CENTER></BODY></HTML>");
NW.document.close();
}
</SCRIPT>

関数 NaviOpen()が呼び出されるとウィンドウを開いて ARTEMIS という文字を
そのウィンドウに表示します。

window.close()

ウィンドウを閉じます

閉じたい目的のウィンドウオブジェクトに対してclose()で閉じます。
IEではこのスクリプトが書かれている自分自身のウィンドウを閉じる時は
ウィンドウを閉じますか? のメッセージが出ます。
他のウィンドウの場合は問い合わせなく、そのまま閉じます。
NNでは、何も聞かずに自分自身でも閉じてしまいます。

自分で次の文を書いて試してみてください。
<FORM>
<INPUT TYPE="button" VALUE="Clsoe" onClick="window.close()">
</FORM>
ちなみにフレームの場合 top.window.close() としないと駄目です。
１つのフレームウィンドウだけ閉じると言う事はできませんから。

window.alert()

警告ダイアログ表示

これは閉じないとブラウザを操作できなくなります。
あまり使いすぎるとうざったいので、必要なポイントで使ってください。
alert("表示メッセージ") と書くだけです。
これが読込まれた時点で、アラートがでます。
メッセージが通常文字列の場合はダブル・シングルクォーテーションで囲みます。
変数などの場合はそのまま書き込んでください。
メッセージ内での改行方法は \n。タブは \t です。
アラートダイアログは文字数に応じて縦横に大きくなります。
メッセージとして書き込んだ文を全て表示します。
改行設定していなくても、ある程度の幅で自動的に折り返されます。

使い方は書かなくても分かると思います、自分で実験してください。

alert()の使い方は、JavaScriptの動作テストでよく使います。
alert(変数)の様に書き込んで変数のその時点での値をチェックしたり
フローがうまく行かない時に、流れのどの時点まできちんとプログラムが
流れているかを確認する為に書き込んだりします。

window.confirm()

確認ダイアログ表示

この確認ダイアログは、OK とキャンセルボタンがあります。
上のサンプルでどちらが押されたかが出ていますね。
この様に、どちらが押されたかが取れるようになっています。
単純ですが OKを押されると trueを、キャンセルだとfalseを返します。

単純な例 (条件演算子)
onClick="confirm('18歳以上ですか?')? location.href='adult.html':location.href='disny.html'"

イベントハンドラに ?:演算子で直接すべて書き込んでいます。
このイベントハンドラをフォームボタン等に付けます。
これは条件演算子を使っていますが、if文で書く事も当然できます。

単純な例 (if文)
onClick="if(confirm('18歳以上ですか?')){location.href='adult.html'}else{location.href='disny.html'}"

OKが押されると if文が成立しますので、adult.htmlへジャンプします。
この様に結果を返すと言う事は、このconfirm()自体がture / false になる事でもあります。
次のような書き方でも構いません。


var User = confirm('はいりますか？');
if(User){ OKの処理 }else{ キャンセルの処理 }

これは、confirm()の結果を Userと言う変数に入れているだけです。

ページを開いた時点で、確認しキャンセルの場合だけ、ページを飛ばす時などは
次のように if文の否定条件で書きます。


if(!confirm('18以上ですか?')){ キャンセルの処理 }

! が付いていますのでキャンセルをした場合に if()が真になり実行されます。

メッセージ部分はアラートと同様です。
サイズも必要に応じて変わります。

window.prompt

入力用プロンプト表示

入力用のプロンプトを表示します。
簡単にユーザーからの入力を促す事ができます。
試してみるとわかる通り、キャンセルを押すと null(何も無い状態)値となり
nullが返されます。文字を入力してOKの場合はその文字を、
何も変えずにOKを押すとデフォルトの状態で入っている文字を
文字を何も入力しないと空文字として空白を返します。
prompt("メッセージ","デフォルト表示")のように書きます。
メッセージは質問や入力を促す言葉で表示される部分。
デフォルト表示文字は何も定義しない(""も書かない)とundefinedが自動で入ります。
""と書いた場合は文字無しとして何も表示されません。
prompt("メッセージ") これだとundefinedが自動で。

prompt()は、表示できるメッセージは2行までで、幅も決まっています。
プロンプトの大きさは変わりません。
デフォルト文字部分の入力用テキストボックスは1行テキストです。

処理例


var User = prompt('名前を入力してください');
if(User != null && User != undefined && User != '')
{ Userの値を取出す処理など }

キャンセルはnull、デフォルトの undefinedも入力無しと判断し
何も入れない空欄は拒否するとした場合の条件づけです。

次によく使われる例

function Members(){
var url = prompt('パスワードを入れてください','');
if(url != null && url != ''){ location.href = url+".html" }
}

アンカーやフォームボタン等でこの関数 Members()を呼び出すと
プロンプトが出ます。
空白やキャンセルではない場合に、その入力された文字列と
.html を連結して、そのページへジャンプします。

この他に、クッキー処理に名前を渡したりなどができます。
フォーム以外のビジターとの簡易インターフェイスになる物です。

アンケートなどでウィザード系式にする時に使う事もできます。
アンケートボタンを押すと、次々にプロンプトが出て
その結果を隠しフォームやフォームに入れて行きます。
最後に『送信しますか?』の confirm()を出せば出来上がりです。

window.setTimeout()

指定時間後動作(タイマー)

setTimeout("式",ミリ秒);
ミリ秒後に、式を実行します。
式の部分はダブル・シングルクォーテーションで囲みます。
囲まないと、setTimeout()が読込まれた時点で実行してしまい
タイマーの役目を果たさないと思います。
通常は式の部分に多くのJavaScriptを書き込むのは大変なので
setTimeout("関数",ミリ秒);の様に関数を書き込みます。
関数側に処理を書きます。
setTimeout()は一度だけの処理です。
ある関数を、一定時間で繰り返したい時は再帰法で、自分自身の
書かれている関数を呼び出します。


function Watch(){
//時間取得処理
//ステータスに表示
WT = setTimeout("Watch()",1000);
}

これは一度Watch()が呼び出されると1秒おきに時間取得して
ステータスに表示するというステータス時計の場合の流れです。

setTimeout()は次に説明する、タイマー解除の為にも
タイマーID = setTimeout() とするのが基本です。

window.clearTimeout()

タイマー解除

タイマーID = setTimeout()で設定されたタイマーを解除します。
使い方は clearTimeout(タイマーID) と書くだけです。
setTimeout()を書く時にきちんとタイマーID(変数)を指定しておかないと
解除する事ができません。
WT = setTimeout("関数",1000); とした場合は
clearTimeout(WT); で解除できます。

window.setInterval()

一定間隔動作

setInterval("式",ミリ秒) は一度これが読込まれると
ミリ秒間隔で繰り返し式を実行しつづけます。
setTimeout()が一回実行なのに対して、時計などの様に繰り返す場合は
こちらの方が便利です。
setInterval()は Mozilla4レベルからなのでそれ未満のブラウザを考慮するなら
setTimeout()を再帰法で使った方が無難です。

余りに時間間隔が短かったり時間のかかる処理の場合に
マシン側がハングする無限ループの様な状態になる場合もあります。

setInterval()の場合は、インターバルIDをしっかり設定し
必要であればインターバルを解除できる様にした方が良いでしょう。
WT = setInterval("関数",1000);

window.clearInterval()

解除

インターバルID = setInterval()で設定されたタイマーを解除します。
使い方は clearInterval(インターバルID) と書くだけです。
setInterval()を書く時にきちんとインターバルID(変数)を指定しておかないと
解除する事ができません。
WT = setInterval("関数",1000); とした場合は
clearInterval(WT); で解除できます。

window.scroll()

スクロール

scroll(x,y)で 0,0(左上)からの絶対値の場所へスクロールさせます。
スクロールできる場合に限ります。
Netscapeでは scrollTo()[絶対]、scrollBy()[相対]が用意されていて
scroll()は互換性の為のものです。
ですが IEとの互換性を考えると、やはりscroll()になります。
徐々にスクロールする場合ですが
scroll(x,y)は絶対値なので何度呼び出しても同じ場所のままです。
ですから、処理で絶対値の場所を変更してやる必要があります。

x=0,y=0;
function PageScroll(){
y += 10;
scroll(x,y)
setTimeout("PageScroll()",100);
}

0.1秒毎に 10ピクセルずつ、y方向へスクロールします。

Netscapeにある scrollBy()を使う場合はxを加算する必要がありません。
現在位置からの相対ピクセル分スクロールしますので。

スクロールを setTimeout()で行うと、永遠に続きます。
ユーザーがページ先頭にスクロールバーで移動しても
すぐにスクロールして下がってしまいます。
必要に応じて、タイマーを解除せねばんりません。
IE4以上のJScriptでは、ウィンドウに表示されていない分も含めて
ドキュメントの長さを取出せます。ですから、ある値で止める事ができます。
Netscapeの場合はウィンドウの高さは取れても、ドキュメントの長さは
取出せないのではないかと思います。

今は時代もかなり変ってきてフレームやポップアップウィンドウなどは敬遠されがちです。フレーム構造の方がページ全体を見やすいとは思うのですが、今はページをHTMLのブロック的要素による構成より、理論的要素での構成が主流になり一つのドキュメントとして捕らえるのが主流です。ポップアップ等もセキュリティ面から敬遠されがちです。また、ステータスバーのコントロールも詐欺的クリックをさせない為に完全コントロールしにくくなっています。使い方にもよりますが、あまりwindowコントロールは使い出がなくなりました。

専用ページから申し込むと
So-netより高い３万円CB

案ずるより産むが易し
使ってみれば疑問も解決

XREA+ (plus) 206円/月
( お試し7日間 )

CORE SERVER 428円/月
( お試し15日間 )

ロリポップ 270円/月
( お試し期間10日間 )

ヘテムル 1620円/月
( お試し期間15日間 )

さくら 129円/月
( お試し期間2週間 )

無駄な高額ドメイン管理料金払ってませんか？

バリュードメイン
ムームードメイン

2010年で第二世代携帯がサービス終了。ソフトバンクに乗り換えて安くなった人が７割以上います！