第6章 Windowの制御

6-1. ウィンドウを開いたり、閉じたりする

新しいウインドウを開いたり閉じたりするには、「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では作動しません。 原因がお判りの方はご一報下されば有難く思います。

6-2. ウインドウを動かす

ウインドウを動かすには、「window」オブジェクトの「moveBy」「moveTo」というメソッドを使います。

window.moveBy(X座標,Y座標) //現在の位置からの相対座標(動かす距離)で指定します

window.moveTo(X座標,Y座標)  //画面左上端からの絶対座標で指定します

上のサンプル・プログラムを実行すると、このようになります。

6-3. ウインドウのサイズを変更する

ウインドウをサイズを変更するには、「window」オブジェクトの「resizeBy」「resizeTo」というメソッドを使います。

☆ 相対的な大きさで指定する方法(現在の大きさからの変更):
    window.resizeBy(横幅,縦幅)
   

☆ 絶対的な大きさで指定する方法(指定の大きさへの変更):
    window.resizeTo(横幅,縦幅)

この種のサンプル・プログラムはこのようなものになります。

6-4. ウインドウをスクロールさせる

ウィンドウをスクロールさせるにはwindow.scrollByかwindow.scrollToを使います。

☆ window.scrollBy(横幅,縦幅) :相対座標でスクロール位置を指定(現在位置からの距離)

☆ window.scrollTo(横幅,縦幅) :左上端からの絶対座標でスクロール位置を指定する

この種のサンプル・プログラムはこのようなものになります。

6-5. jQueryのライブラリー利用

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軸のピクセルの数字で記入する

この種のサンプル・プログラムはこのようなものになります。