PR
構文
 
  window.open("URI","ウィンドウ名","属性")
文字列
ダイアログ・ボックスに表示する文字列
URI
開いたウインドウに読み込むURI
ウィンドウ名
開いたウインドウの名称
属性
ウインドウのオプション
総合 インデックス
メソッド
FirefoxIE

説明

  • 新しいウインドウを開くメソッド。
  • メソッドに設定する値のうち,「URI」はウィンドウ内に表示するページのURIの値を設定する。
  • 「ウインドウ名」には任意のウインドウ名を設定する。ここで設定したウインドウ名は,以降の処理で,JavaScriptを使って参照できるようになる。例えば,「open」メソッドを使って,同じウインドウ名を設定した新たなウインドウを開くと,その都度,新規にウインドウが開くのではなく,既に開いている同じウインドウ名のウインドウに,ページが読み込まれることになる。
  • 「属性」では,ウインドウのツール・バーやスクロール・バーなどの有無,ウインドウのサイズなど,新たに開くウインドウの形状を指定する。
  • 「属性」の各項目は「,」で区切って設定する。
  • 「属性」のうち,ツール・バーやスクロール・バーなどウインドウの機能に関する項目の設定では,その項目が必要であれば「=yes」又は「=1」,不要であれば「=no」又は「=0」と指定して設定する。
  • 各項目は,省略すると「yes」として判断される。
  • ウインドウのサイズや表示位置など,サイズや位置に関する設定の,設定単位は「ピクセル」となる。
  • ウインドウ・サイズは,セキュリティ対策のため,横幅や高を100ピクセル以下に設定しても,反映されない。
  • 「open」メソッドの「属性」は,()の通り。Internet Explorer,Opera未対応の属性や,Internet Explorer独自の属性もある。この他にも,「z-lock」,「alwaysLowered」などの特定状態のNetscape Navigator4.Xでのみ機能する「属性」も存在するが,割愛している。
    表 openメソッドの属性オプション(windowFeatures)
    (JavaScript1.0)
    toolbar[=yes|no]|[=1|0] ツール・バー
    location[=yes|no]|[=1|0] ロケーション・バー
    directories[=yes|no]|[=1|0] デレクトリ・バー
    status[=yes|no]|[=1|0] ステータス・バー
    menubar[=yes|no]|[=1|0] メニュー・バー
    scrollbars[=yes|no]|[=1|0] スクロール・バー
    resizable[=yes|no]|[=1|0] リサイズ・ボックス
    width=pixels ウインドウの横幅(コンテンツ表示領域)
    height=pixels ウインドウの縦幅(コンテンツ表示領域)
    (JavaScript1.2)
    left=pixels デスクトップの左端からの位置
    top=pixels デスクトップの上端からの位置
    -以下Internet Explorer・Opera未対応-
    innerWidth=pixels ウインドウのコンテンツ表示領域の横幅
    (widthから変更)
    innerHeight=pixels ウインドウのコンテンツ表示領域の高さ
    (heightから変更)
    outerWidth=pixels ウインドウの外周の幅
    outerHeight=pixels ウインドウの外周の高さ
    screenX=pixels ディスプレイ左上からのX座標
    screenY=pixels ディスプレイ左上からのY座標
    (Internet Explorer独自)
    fullscreen[=yes|no]|[=1|0] フル・スクリーン・モード
    * Internet Explorer7.0より以前のバージョンでは,キオスクモードで開いたが, Internet Explorer7.0からは,通常のウインドウが,フルスクリーンで開くように変更された。

    用例

    ボタンをクリックすると,新しいウインドウ「WinOpen」が開く。ツール・バー有り,ステータス・バーとスクロール・バーなし,高さ800ピクセル,横幅650ピクセルで,ディスプレイ左から10ピクセル,上から50ピクセルの位置に開き,HTMLフアイル「NewWin.html」が読み込まれる。
    【index.html】
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>open</title>
    <script type="text/javascript">
    <!--
    function WinOpen(){window.open("NewWin.html","WinOpen",
                        "toolbar=yes,status=no,scrollbars=no,
    width=800,height=650,left=10,top=50") }
    //-->
    </script>
    <style type="text/css">
    <!--
    body { background-color: #ffffff; }
    -->
    </style>
    </head>
    <body>
    *新しいウインドウを開く
    <p>
    <form>
        <input type="button" value="新しいウインドウを開く" 
    onclick="WinOpen()">
    </form>
    </p>
    </body></html>
    
    
    【NewWin.html】
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <title>NewWin.html</title>
    <style type="text/css">
    <!--
    body { background-color: #ffffff; }
    -->
    </style>
    </head>
    <body>
    ・toolbar=yes<br>
    ・status=no<br>
    ・scrollbars=no<br>
    ・width=800<br>
    ・height=650
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・<br>・<br>・
    <br>・<br>・<br>・
    </body></html>

    この用例を実行する