Last Update 2023/11/11
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>