windowオブジェクト

新規ウィンドウを開く

  • windowオブジェクトのopenメソッドを使用します
  • その戻り値は、生成されたwindowオブジェクトになります
  • windowオブジェクトは、Webブラウザが自動的に生成するオブジェクトです
  • プログラム内で開いた「windowオブジェクト」の記述は省略できません
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウを開く</title>
<script>
function openWin() {
var win = window.open('', '', 'width=520, height=400'); //windowを開く
  win.document.open(); //documentオブジェクトを開く
  win.document.write('<img src="img/01.jpg">'); //イメージを表示
  win.document.write('<form><p>'); //フォームを表示
  win.document.write('<input type="button" value="閉じる"'); //[閉じる]ボタンを表示
  win.document.write('onclick="window.close()">'); //イベントハンドラ
  win.document.write('<p></form>');
  win.document.close(); //documentオブジェクトを閉じる
}
</script>
</head>
<body background="images/background.gif">
<form name="myForm"><p>
<input type="button" value="開く" name="openBtn" onclick="openWin()">
</p></form>
</body>
</html>
既存のWebページをロードする
var win = window.open('http://google.co.jp', '', 'resizable=yes', 'width=600, height=400');
  • 引数１：URL
  • 引数２：ウィンドウ名を指定しますが、通常は空
  • 引数３：サイズ変更
  • 引数４：幅（ピクセル指定）
  • 引数５：高さ（ピクセル指定）


openメソッドの主なオプション
オプション 設定値 説明
menubar yes または no メニューバーを表示するかどうか
resizable yes または no ウィンドウサイズを可変にするかどうか
scrollbars yes または no スクロールバーを表示するかどうか
status yes または no ステータスバーを表示するかどうか
toolbar yes または no ツールバーを表示するかどうか
width ピクセル値 ウィンドウの幅
height ピクセル値 ウィンドウの高さ

プログラムでHTML要素を出力
  1. 最初の引数を空文字列「' '」にwindowオブジェクトのopenメソッドを実行する
  2. documentオブジェクトのopenメソッドを実行する
  3. documentオブジェクトのwriteメソッドでHTML要素を書き出す
  4. documentオブジェクトのcloseメソッドを実行する


ダイアログボックス内の表示を改行

  • エスケープシーケンス「\n」で改行

まとめ

  • 新規ウィンドウを開くには、windowオブジェクトのopenメソッドを使用する
  • 新規ウィンドウにHTMLを出力するには、documentオブジェクトのopenメソッド、writeメソッド、closeメソッドの順に実行する