JavaScript・PHPのサンプルやWordPressのテーマ・無料フォント、アフィリエイトやブログの運営方法等の紹介

JavaScript

サイズ等を決めて新しいウィンドウを開く

window.open('URL','ウィンドウ名','属性');

属性効果
widthpxウィンドウの横幅
heightpxウィンドウの縦幅
scrollbarsyes / no , 1 / 0スクロールバーの有無
statusyes / no , 1 / 0ステイタスバーの有無
toolbaryes / no , 1 / 0ツールバーの有無
locationyes / no , 1 / 0ロケーションバーの有無
menubaryes / no , 1 / 0メニューバーの有無
directoriesyes / no , 1 / 0ユーザー設定ツールバーの有無
resizableyes / 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>で囲む。

条件値を入力または選択
新しいウィンドウで開くURL (必須項目)
新しいウィンドウの名前 (必須項目)
ウィンドウの横幅、縦幅 px   px (半角数字)
 ※スクロールバーを表示する場合はチェック
 ※ステイタスバーを表示する場合はチェック
 ※ツールバーを表示する場合はチェック
 ※ロケーションバーを表示する場合はチェック
 ※メニューバーを表示する場合はチェック
 ※ユーザー設定ツールバーを表示する場合はチェック
 ※ウィンドウのリサイズを可能にする場合はチェック
   

作成されたJavaScript


  

関連記事

Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

このサイトについて

JavaScript・PHPのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com