Loose-Info.com

Last Update 2019/12/25


TOP - JavaScript - Window - open()

※ 下記のコード例は、ブラウザの種類・設定によって、実行不能な場合が確認されています。

ウィンドウを新規に開きます。
また、ウィンドウ名を指定した場合は、既存のウィンドウの内容を変更します。


戻り値1 = window.open( 値1 , 値2 , 値3 )

戻り値1
open()の対象となったwindowオブジェクトへの参照値
値1
表示するURLを示す文字列
値2
開く(表示する)対象となるウィンドウ名 既に同名のウィンドウが存在する場合は、既存ウィンドウの表示内容が変更される
値3
ウィンドウの機能・外観を指定する文字列
directories(yes, no) : ウィンドウ上部にディレクトリボタンを表示 height(px) : ウィンドウの高さ指定 width(px) : ウィンドウの幅指定 location(yes, no) : URL入力用テキストボックスの表示 ブラウザによっては表示部のみの場合あり menubar(yes, no) : メニューバーを表示 resizable(yes, no) : no を指定した場合は、ウィンドウのサイズ変更は不可となる scrollbars(yes, no) : 必要時にスクロールバーを表示可能とする toolbar(yes, no) : ツールバーを表示


(例1)
<SCRIPT type="text/javascript"> <!-- function btnclick1() { // URL指定、名前指定なしでウィンドウを開く var w1 = window.open("", ""); } //--> </SCRIPT>


(例2)
<SCRIPT type="text/javascript"> <!-- function btnclick2() { // URL指定でウィンドウを開く var w1 = window.open("http://www.loose-info.com/", ""); } //--> </SCRIPT>


(例3)
<SCRIPT type="text/javascript"> <!-- function btnclick3() { // 名前を指定し、URL指定でウィンドウを開く var w1 = window.open("http://www.loose-info.com/", "test"); } //--> </SCRIPT>


(例4)
<SCRIPT type="text/javascript"> <!-- function btnclick4() { // (例3)と同じ名前を指定し、URL指定でウィンドウを開く // (例3)のを実行後ボタンを押すと、(例3)の表示が上書きされる var w1 = window.open("http://www.loose-info.com/", "test"); } //--> </SCRIPT>


(例5)
<SCRIPT type="text/javascript"> <!-- function btnclick5() { // ウィンドウ上部にディレクトリボタンを表示 // (ブラウザにより表示は異なる) var w1 = window.open("http://www.loose-info.com/", "test5", "directories=yes"); } //--> </SCRIPT>


(例6)
<SCRIPT type="text/javascript"> <!-- function btnclick6() { // ウィンドウのサイズを指定 var w1 = window.open("http://www.loose-info.com/", "test6", "height=400,width=400"); } //--> </SCRIPT>


(例7)
<SCRIPT type="text/javascript"> <!-- function btnclick7() { // URL入力用テキストボックスの表示 // (ブラウザにより表示は異なる) var w1 = window.open("http://www.loose-info.com/", "test7", "location=yes"); } //--> </SCRIPT>


(例8)
<SCRIPT type="text/javascript"> <!-- function btnclick8() { // メニューバーの表示 var w1 = window.open("http://www.loose-info.com/", "test8", "menubar=yes"); } //--> </SCRIPT>


(例9)
<SCRIPT type="text/javascript"> <!-- function btnclick9() { // ウィンドウのサイズ変更を不可とする var w1 = window.open("http://www.loose-info.com/", "test9", "resizable=no"); } //--> </SCRIPT>


(例10)
<SCRIPT type="text/javascript"> <!-- function btnclick10() { // 必要時にスクロールバーを表示する var w1 = window.open("http://www.loose-info.com/", "test10", "scrollbars=yes"); } //--> </SCRIPT>


(例11)
<SCRIPT type="text/javascript"> <!-- function btnclick11() { // ツールバーを表示する var w1 = window.open("http://www.loose-info.com/", "test11", "toolbar=yes"); } //--> </SCRIPT>