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');
openメソッドの主なオプション
オプション | 設定値 | 説明 |
---|---|---|
menubar | yes または no | メニューバーを表示するかどうか |
resizable | yes または no | ウィンドウサイズを可変にするかどうか |
scrollbars | yes または no | スクロールバーを表示するかどうか |
status | yes または no | ステータスバーを表示するかどうか |
toolbar | yes または no | ツールバーを表示するかどうか |
width | ピクセル値 | ウィンドウの幅 |
height | ピクセル値 | ウィンドウの高さ |
プログラムでHTML要素を出力
- 最初の引数を空文字列「' '」にwindowオブジェクトのopenメソッドを実行する
- documentオブジェクトのopenメソッドを実行する
- documentオブジェクトのwriteメソッドでHTML要素を書き出す
- documentオブジェクトのcloseメソッドを実行する
ダイアログボックス内の表示を改行
- エスケープシーケンス「\n」で改行
まとめ
- 新規ウィンドウを開くには、windowオブジェクトのopenメソッドを使用する
- 新規ウィンドウにHTMLを出力するには、documentオブジェクトのopenメソッド、writeメソッド、closeメソッドの順に実行する