☆　新しいウィンドウを開く

このページ最下部の実行するで確認できます

［例］　w=window.open(url, name [, style])

項目スタイル値意　　味　　
バ
｜
の
表
示
location=yes|no場所ツールバーの表示
menubar=yes|noメニューバーの表示
scrollbars=yes|noスクロールバーの表示
status=yes|noステータスバーの表示
toolbar=yes|noツールバーの表示
titlebar=yes|noタイトルバーの表示
セキュリティの設定が必要
大
き
さ
width=pixeウィンドウの横幅
height=pixeウィンドウの高さ
fullscreen=yes|noフルスクリーンモードで開く
閉じるには ALT+F4 を使う
resizable=yes|noウィンドウのサイズ変更の可否
位
置
top=pixe画面の上端からの距離
left=pixe画面の左端からの距離
そ
の
他
channelmode=yes|noチャネルモードで開く
directories=yes|noユーザ設定ツールバーの表示


★ ウィンドウを閉じる　　　w.close() ;

★ このウィンドウへの表示（テキストの出力）


★ このウィンドウのスクロール

  • w.scroll(x, y)
  • w.scrollTo(x, y)
  • w.scrollBy(x, y)

  • scroll() 及び scrollTo() は左上を原点とした絶対座標で、x、y の位置に画面をスクロールさせます。
  • scrollBy() は現在の位置からの相対座標でx、y だけ画面をスクロールさせます。
  • scroll() は古い仕様で、過去の互換性のために残されています。

★ このウィンドウのサイズ変更

  • w.resizeTo(x, y)
  • w.resizeBy(x, y)

  • resizeTo() は絶対座標で、ウィンドウの大きさを x、y に変更します。
  • resizeBy() は現在の大きさからの相対値で、ウィンドウの大きさを に変更します。
  • 100×100 よりも小さくできないように、通常は制限されています。

★ このウィンドウを移動させる

  • w.moveTo(x, y)
  • w.moveBy(x, y)

  • moveTo() は絶対座標で、ウィンドウの位置を x、y の場所に移動します。
  • moveBy() は現在の位置からの相対座標で、ウィンドウの位置を移動します。




☆　新しいウィンドウを開く function nw_open()

［例］　w=window.open(winurl,"calen",w_para)

  • 　ウィンドウの識別子をwとする。

  • 　dumy.htmlを表示する。

  • 　ウィンドウの名前を、calenとする。

  • 　ウィンドウのスタイルを変数w_paraで指定する。

項目スタイル値意　　味　　
バ
｜
の
表
示
location=no場所ツールバーの表示
menubar=noメニューバーの表示
scrollbars=yesスクロールバーの表示
status=noステータスバーの表示
toolbar=noツールバーの表示
titlebar=noタイトルバーの表示
セキュリティの設定が必要
大
き
さ
width=400ウィンドウの横幅
height=300ウィンドウの高さ
fullscreen=noフルスクリーンモードで開く
resizable=yesウィンドウのサイズ変更の可否
位
置
top=200画面の上端からの距離
left=100画面の左端からの距離


function nw_open() 
function nw_open()
{
  winurl = 'dumy.html';
  w_para="toolbar=no,location=no,directries=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=400,height=300,top=200,left=100" ;
  w=window.open(winurl,"calen",w_para);
}
dumy.html 
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE>Body</TITLE>
</HEAD>
<body bgcolor=red>
</BODY>
</html>
実行する


★　内容の書き換え function re_w()

function re_w()
{
  w.document.clear() ;
  w.document.open() ;
  w.document.write("<HTML>") ;
  w.document.write("<HEAD>") ;
  w.document.write("<META http-equiv=\"Content-Type\" content=\"text/html; charset=x-sjis\">") ;
  w.document.write("<TITLE>New Window</TITLE>") ;
  w.document.write("</HEAD>") ;
  w.document.write("<body bgcolor=green text=white>") ;
  w.document.write("<h1>背景を緑にした<h1>") ;
  w.document.write("</BODY>") ;
  w.document.write("</html>") ;
  w.document.close() ;
}
実行する


★　ウィンドウサイズの変更 function re_size()

400X300を400x500に変更 
function re_size()
{
  w.resizeTo(400,500) ;
}
実行する

★　相対値でのサイズの変更 function re_size_so()

横幅を400大きく、高さを100小さく変更 
function re_size_so()
{
  w.resizeBy(400,-100) ;
}
実行する


★　ウィンドウの移動 function w_move()

ウィンドウの左上を(400,300)に移動 
function w_move()
{
  w.moveTo(400,300) ;
}
実行する

★　相対値での移動 function w_move_so()

左に400大きく、下に300移動 
function w_move_so()
{
  w.moveBy(400,300) ;
}
実行する


★　ウィンドウを閉じる function w_close()

function w_close()
{
  w.close() ;
}
実行する






☆　ファイル全体 nw.html

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE>New Window</TITLE>
<SCRIPT language="JavaScript1.2">
function nw_open()
{
  winurl = 'dumy.html';
  w_para="toolbar=no,location=no,directries=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=400,height=300,top=200,left=100" ;
  w=window.open(winurl,"calen",w_para);
}

function re_w()
{
  w.document.clear() ;
  w.document.open() ;
  w.document.write("<HTML>") ;
  w.document.write("<HEAD>") ;
  w.document.write("<META http-equiv=\"Content-Type\" content=\"text/html; charset=x-sjis\">") ;
  w.document.write("<TITLE>New Window</TITLE>") ;
  w.document.write("</HEAD>") ;
  w.document.write("<body bgcolor=green text=white>") ;
  w.document.write("<h1>背景を緑にした<h1>") ;
  w.document.write("</BODY>") ;
  w.document.write("</html>") ;
  w.document.close() ;
}

function re_size()
{
  w.resizeTo(400,500) ;
}

function re_size_so()
{
  w.resizeBy(400,-100) ;
}

function w_move()
{
  w.moveTo(400,300) ;
}

function w_move_so()
{
  w.moveBy(400,300) ;
}

function w_close()
{
  w.close() ;
}
</SCRIPT>
</HEAD>
<body bgcolor=000000 text=ffffff link=ffffff vlink=ffffff alink=ff0000>
<a href="#" onClick="nw_open()"><font size=5>新しいウィンドウを開く</font></a><br>
<a href="#" onClick="re_w()"><font size=5>内容の書き換え</font></a><br>
<a href="#" onClick="re_size()"><font size=5>ウィンドウサイズの変更</font></a><br>
<a href="#" onClick="re_size_so()"><font size=5>相対値でのサイズの変更</font></a><br>
<a href="#" onClick="w_move()"><font size=5>ウィンドウの移動</font></a><br>
<a href="#" onClick="w_move_so()"><font size=5>相対値での移動</font></a><br>
<a href="#" onClick="w_close()"><font size=5>ウィンドウを閉じる</font></a><br>
</BODY>
</html>
dumy.html 
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<TITLE>Body</TITLE>
</HEAD>
<body bgcolor=red>
</BODY>
</html>
実行する