windowオブジェクト

JavaScript 基礎 授業




☆★データーでの確認★☆

新規ウィンドウを開く


  • windowオブジェクトの
    openメソッドを使用
  • その戻り値は、生成されたwindowオブジェクトになる
  • windowオブジェクトは、Webブラウザが自動的に生成するオブジェクト
  • プログラム内で開いた「windowオブジェクト」の記述は省略できない


ソースコード【 HTML 】

<!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="images/02.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/01.jpg">

<form name="myForm"></p>

<input type="button" value="開く" name="openBtn" onclick="openWin()"> 

</p></form>

<!-- 閉じるボタン
<button onclick='window.close()'>閉じる</button>
 -->
 
</body>
</html>

ブラウザで表示


  • 開くを押すと指定されたウィンドウサイズで開く