新しいウインドウを開いたり閉じたりするには、「window」オブジェクトの「open」と「close」というメソッドを使います。「window」オブジェクトは自分自身のウインドウオブジェクトを示します。「alert」や「prompt」、「setTimeout」、「setInterval」もウインドウオブジェクトのメソッドです。
☆ 新しいウインドウを開く、閉じる
obj=window.open("URL","ウインドウの名前","パラメータ")
obj: ウインドウオブジェクトを返します(省略可能)
URL: 開いたウインドウに表示するURLを指定します(省略可能)
ウインドウの名前:その名前を持つウインドウが開かれていない場合新規にウインドウ
を開きます(省略可能)
パラメータ:下表を参照してください(省略可能)
☆ スクリプトが記述されているウィンドウ閉じる
window.close()
パラメター名 | 説明 |
---|---|
toolbar | ツールバーの表示/非表示 [=yes|no] |
location | ロケーションバーの表示/非表示 [=yes|no] |
directories | ディレクトリバーの表示/非表示 [=yes|no] |
status | ステータスバーの表示/非表示 [=yes|no] |
menubar | メニューバーの表示/非表示 [=yes|no] |
scrollbars | スクロールバーの表示/非表示 [=yes|no] |
resizable | ウインドウサイズの変更可/不可 [=yes|no] |
screenX | デスクトップ左端からの座標。IE不可 [px] |
screenY | デスクトップ上端からの座標。IE不可 [px] |
left | デスクトップ左端からの座標。IE、ネスケ7ではOK [px] |
top | デスクトップ上端からの座標。IE不可 [px] |
width | ウインドウの内側の横幅 [px] |
height | ウインドウの内側の縦幅 [px |
新規のWindowを作成し、それに「Hello New Window」という見出しを書き出したはこのようになります。何故かこのScriptはFirefoxやGoogleChromeでは作動しますが、IEでは作動しません。 原因がお判りの方はご一報下されば有難く思います。
ウインドウを動かすには、「window」オブジェクトの「moveBy」か「moveTo」というメソッドを使います。
window.moveBy(X座標,Y座標)
window.moveTo(X座標,Y座標) //画面左上端からの絶対座標で指定します
上のサンプル・プログラムを実行すると、このようになります。
ウインドウをサイズを変更するには、「window」オブジェクトの「resizeBy」か「resizeTo」というメソッドを使います。
☆ 相対的な大きさで指定する方法(現在の大きさからの変更):
window.resizeBy(横幅,縦幅)
☆ 絶対的な大きさで指定する方法(指定の大きさへの変更):
window.resizeTo(横幅,縦幅)
この種のサンプル・プログラムはこのようなものになります。
ウィンドウをスクロールさせるにはwindow.scrollByかwindow.scrollToを使います。
☆ window.scrollBy(横幅,縦幅) :相対座標でスクロール位置を指定(現在位置からの距離)
☆ window.scrollTo(横幅,縦幅) :左上端からの絶対座標でスクロール位置を指定する
この種のサンプル・プログラムはこのようなものになります。
Windowを制御するjQuery PluguinとしてjQuery Window Plugin V5.03 があります。
このPluginで見栄えの良いWindow-likeなDialogを簡単に追加することが出来ます。
☆ ダウンロード・サイト : http://fstoke.me/jquery/window/
☆ 使い方:$.window(
title: "タイトル名",
url: "ウィンドウのURL",
その他のアリブート又はメソッド名:”アリブート又はメソッド”
☆ 主な使えそうなアトリビュートやメソッド:
title: "", Windowのタイトルをstringで記入する
url: "", Windowのタイトルをstringで記入する
content: "", html string, jquery object, elementをstringで記入する
containerClass: "":追加するcontainerのclassをstringで記入する
width : "", windowの横幅をピクセルの数字で記入する
height: "", windowの高さをピクセルの数字で記入する
x: "", windowのX軸のピクセルの数字で記入する
y: "", windowのY軸をピクセルの数字で記入する
z: "", CSSのZ軸のピクセルの数字で記入する
この種のサンプル・プログラムはこのようなものになります。