- HOME >
- JavaScript >
- サイズ等を決めて新しいウィンドウを開く
サイズ等を決めて新しいウィンドウを開く
window.open('URL','ウィンドウ名','属性');
| 属性 | 値 | 効果 |
|---|---|---|
| width | px | ウィンドウの横幅 |
| height | px | ウィンドウの縦幅 |
| scrollbars | yes / no , 1 / 0 | スクロールバーの有無 |
| status | yes / no , 1 / 0 | ステイタスバーの有無 |
| toolbar | yes / no , 1 / 0 | ツールバーの有無 |
| location | yes / no , 1 / 0 | ロケーションバーの有無 |
| menubar | yes / no , 1 / 0 | メニューバーの有無 |
| directories | yes / no , 1 / 0 | ユーザー設定ツールバーの有無 |
| resizable | yes / no , 1 / 0 | ウィンドウのリサイズの可否 |
サイズやウィンドウの名前、スクロールバーの有無や各種ステータスの有無を決めて新しいウィンドウを開かせたい時には、「window.open()」を使います。”URL”には別ウィンドウで開かせるURL、”ウィンドウ名”は任意で好きな名前、”属性”は上記の表の中から指定したいものを値とともに記述します。属性を省略した場合は、デフォルトの値でウィンドウは開かれますが、ブラウザによって挙動が異なりますので、意図どおりに動作させたい場合は、なるべく指定しましょう。下記がサンプルになります。
<html>
<head>
<title>サイズ等を決めて新しいウィンドウを開く</title>
<script language="JavaScript" type="text/javascript">
function openWin(){
newWin = window.open('http://www.yahoo.co.jp/','sampleWin','width=400,height=300,
scrollbars=no,status=no,toolbar=no,location=no,menubar=no,resizable=yes');
newWin.focus();
}
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="openWin()">ウィンドウを開く</a>
</body>
</html>
サンプルでは、window.open()の際に「newWin」という名前を付けて新しいウィンドウを開かせています。そして、その後に記述されている「newWin.focus();」でウィンドウを前面に表示させるようにしています。もしこれを記述させない場合、新しく開かれたウィンドウに、また別のURLを読み込ませた際に前面に表示されず、別のウィンドウの裏に隠れてしまったままの事がありますので不親切になってしまいます。
また、「<a href="javascript:void(0);" onclick="openWin()">」の部分ですが、このアンカータグに囲まれている文字をクリックすると、「onclick」によりfunctionの「openWin()」が実行されます。しかし「href」の中身を空のままにしておくと、ページの先頭へ移動してしまいます。それを防ぐ為に、「javascript:void(0)（何もさせない）」を記述します。
簡単！JavaScript作成ツール
自分の好みで条件を選択したり、値などを入力したりするだけで望みどおりの条件で簡単にJavaScriptを作成することが出来ます。作成されたJavaScriptを適用させたいHTMLにコピーして張り付けるだけで、自分のホームページでJavaScriptが使えるようになります。
- 条件を入力または選択する。
- 動作チェックをし、良ければコピーする。
- JavaScriptを動作させたいHTMLの<head>～</head>の間に、コピーしたJavaScriptを貼り付ける。
- クリックすることで、新しいウィンドウを開かせたい対象を、<a href="javascript:void(0);" onclick="openWin()">対象</a>で囲む。
関連記事
こちらの記事も読まれています
