【JavaScript】Windowオブジェクトの操作方法

JavaScript

新しいウィンドウを開く

open( )メソッドは新しいウィンドウを開くことができます。指定したURLのページを開いてみます。

//open("URL","ウィンドウ名（省略するときは「""」）,オプション"
myWin = open("http://www.google.co.jp/","new","menubar = 1");

//オブジェクトmyWinのウィンドを閉じます
//myWin.close();


オプションでウィンドウの設定を変えることができます。例えば、"menubar = 1"と指定すると、メニューバーのみが表示され、メニューバー以外のバーは表示されなくなります。

オプション 働き
location = "1 or 0" ロケーションバーの表示（１）、非表示（０）
menubar = "1 or 0" メニューバーの表示（１）、非表示（０）
scrollbars = "1 or 0" スクロールバーの表示（１）、非表示（０）
status = "1 or 0" ステータスバーの表示（１）、非表示（０）
toolbar = "1 or 0" ツールバーの表示（１）、非表示（０）
resizable = "1 or 0" ウィンドウのサイズ変更可（１）、不可（０）
width = "数値" ウィンドウの幅
height = "数値" ウィンドウの高さ

※1または0を指定するオプションで1を指定すると、それ以外の値指定のないオプションは0が指定されたとみなされます。

確認ダイアログボックスを表示する

confirm( )メソッドをつかって確認ダイアログを表示させます。confrim( )の確認ダイアログに表示される「OK」ボタンを選択するとtureが返されます。function()内で条件分岐if文をつかった処理を記述してみます。

<html>
<body>
<h2>Windowオブジェクト</h2>
<!-- リンクをクリックするとmyEventがイベント処理されます-->
<a href="javascript:void(0)" onclick="myEvent()">リンク</a>
<script type="text/javascript">

//myEventを関数化
function myEvent(){

//変数の宣言
var message = "Googleを開きますか？";

//条件分岐（OK → Google、キャンセル → 「キャンセルされました」）
//confirm( )はOKを選択するとtureを返します
if(confirm(message) == true){
	open("http://www.google.co.jp/","new","menubar = 1");
	}else{
		alert("キャンセルしました");
	}
}
</script>
</body>
</html>

文字入力ダイアログを表示する

prompt( )メソッドをつかって文字入力ダイアログを表示させます。prompt( )の文字入力に表示される「OK」ボタンを選択すると文字列が返されます。「キャンセル」ボタンを選択すると"null"が返されます。

//prompt()メソッドで文字入力ダイアログを表示する
prompt("お名前は？","鈴木です");


function()内で条件分岐if文をつかった処理を記述してみます。

<html>
<body>
<h2>Windowオブジェクト</h2>
<script type="text/javascript">

//myEventを関数化
function myEvent(){

	//変数の宣言（prompt()：OK→文字列を返します、キャンセル→nullを返します）
	var name = prompt("お名前は？","");
	
	//条件分岐（変数nameが空でなければ入力した文字列を表示）
	if(name != ""){
	document.write("ようこそ、" + name + "さん");
	}
}

</script>
</body>
</html>

タイマーを設定・解除する

指定した時間に繰り返し処理を行うには、setInterval( )メソッドを使います。

//setInterval("実行する処理を指定","時間をミリ秒で指定します（１秒＝1000ミリ秒）")
myTime = setInterval("alert('5秒経過しました')",5000);

//タイマーを解除するには、
//clearInterval(mytime);


Date( )オブジェクトをつかって、現在の日時を5秒毎に更新してみます。

<html>
<body>
<h2>Windowオブジェクト</h2>
<script type="text/javascript">

now = new Date();
document.write(now);
mytime = setInterval("location.reload()",5000);

</script>
</body>
</html>