TOPページ > ウィンドウを開く、閉じる、制御する
ウィンドウを開く、閉じる、制御する

ウィンドウを開く、閉じる、制御する

ブログでも使える簡単なJavaScriptをご紹介します。JavaScriptを使えば、マウスが重なったときに色や表示内容を変えるなど、ページを動的に変化させることができます。

HTMLは基本的に大文字でも小文字でもかまいませんが、JavaScriptは大文字・小文字を区別しますので ソースは正しく記述しましょう。

ウィンドウを開く、閉じる、制御する 項目一覧

JavaScriptを使って開いたポップアップウィンドウなどを、一定時間後に自動で閉じることができます。下記のリンクをクリックするとポップアップでサンプルページ...

簡単な JavaScript を使って、ウィンドウの表示内容をスクロールさせることができます。 ※このサンプルは、インラインフレームで別ページをブログに埋め込ん...

簡単な JavaScript を使って、ホームページやブログなどのウェブサイトに OKボタンと キャンセルボタン のある確認ダイアログを表示することができます。...

簡単な JavaScript を使って、ホームページやブログなどのウェブサイトに OKボタンのある警告ダイアログを表示することができます。alertプロパティを...

ホームページやブログなどのウェブサイトを閲覧するブラウザのウィンドウのステータスバーに、文字列を表示することができます。statusプロパティを使用します。 ス...

JavaScript を使って別ウィンドウを開いた際に、イベントパンドラを使って 親ウィンドウ(別ウィンドウを開いた元のページ)から 子ウィンドウの表示内容を操...

ホームページやブログなどのウェブサイトで、JavaScriptのwindow.open() を使ってウィンドウを開く際に、さまざまなスタイルを指定することができ...

JavaScript の window.open() を使って別のページにジャンプしたり、新規ウィンドウを開く際 にウィンドウのサイズを変更されたくない場合は、...

簡単なJavaScriptを使って、ウィンドウの位置や大きさを指定することができます。これらに関するJavaScript のメソッドは、次のようになります。 ウ...

ホームページやブログなどのウェブサイトで JavaScript の window.open() を使って、ポップアップウィンドウを開くことができます。 ポップ...

JavaScriptの、window.open() を使って新規ウィンドウを開く際に、メニューバーやツールバーの有り無しを指定することができます。 ウィンドウを...

ホームページやブログなどのウェブサイトで 他のページにジャンプする際に、簡単なJavaScriptを使って、大きさを指定して開くことができます。window....

ホームページやブログなどのウェブサイトに 簡単な JavaScriptを使って、今開いているウィンドウを閉じるリンクやボタンを作ることができます。ホームページや...

ホームページやブログなどのウェブサイトで 他のページにジャンプする際に、簡単なJavaScriptを使うと、ウィンドウの大きさや、メニューバーやスクロールバーの...

2006年05月29日

JavaScriptを使って開いたポップアップウィンドウなどを、一定時間後に自動で閉じることができます。下記のリンクをクリックするとポップアップでサンプルページが開きますが、このウィンドウは3秒後に自動で閉じるように設定されています。

サンプルページへ

このサンプルのソースは、次のようになっています。

続きを読む "一定時間後に自動でウィンドウを閉じる" »

2006年04月12日

簡単な JavaScript を使って、ウィンドウの表示内容をスクロールさせることができます。

※このサンプルは、インラインフレームで別ページをブログに埋め込んであります。

ページのスクロールに関連する JavaScript のメソッドおよびプロパティは、下記のようになります。

続きを読む "ウィンドウをスクロールさせて表示する" »

簡単な JavaScript を使って、ホームページやブログなどのウェブサイトに OKボタンと キャンセルボタン のある確認ダイアログを表示することができます。confirmプロパティを使用します。

OKボタンがクリックされた場合は true、キャンセルボタンがクリックされた場合は false が値として返されます。

いずれかのボタンが押されるまで、スクリプトは次の処理へ進みません。また この間は、ブラウザの操作もできません。

変数名 = ウィンドウまたはフレーム名.confirm(ダイアログに表示する文字列)
  1. 変数名:このダイアログは、OKボタンがクリックされた場合は true、キャンセルボタンがクリックされた場合は false が値として返されます。この値を代入する変数を指定します。
  2. ウィンドウまたはフレーム名:警告ダイアログを表示するウィンドウまたはフレーム名を指定します。省略可能です。
  3. ダイアログに表示する文字列:ダイアログに表示する文字列を改行したい場合は、 ¥n を挿入します。¥t を挿入すると、タブを入れることもできます。

サンプルのダイアログです。

続きを読む "確認メッセージを表示する" »

簡単な JavaScript を使って、ホームページやブログなどのウェブサイトに OKボタンのある警告ダイアログを表示することができます。alertプロパティを使用します。

OKボタンがクリックされるか、[ X ] ボタンでダイアログが閉じられるまで、スクリプトは次の処理へ進みません。また この間は、ブラウザの操作もできません。

ウィンドウまたはフレーム名.alert(ダイアログに表示する文字列)
  1. ウィンドウまたはフレーム名:警告ダイアログを表示するウィンドウまたはフレーム名を指定します。省略可能です。
  2. ダイアログに表示する文字列:ダイアログに表示する文字列を改行したい場合は、 ¥n を挿入します。¥t を挿入すると、タブを入れることもできます。

サンプルソースです。このページを表示すると、確認ダイアログが出現します。

続きを読む "警告メッセージを表示する" »

2006年04月11日

ホームページやブログなどのウェブサイトを閲覧するブラウザのウィンドウのステータスバーに、文字列を表示することができます。statusプロパティを使用します。

ステータスバーの文字列を設定または参照する
ウィンドウ名.status = 文字列
ステータスバーの標準文字列を設定または 参照する
ウィンドウ名.defaultStatus = 文字列
  1. ウィンドウ名:ステータスバーに表示する文字列を設定または参照する対象のウィンドウ名を指定します。省略可能です。
  2. 文字列:ステータスバーに文字列を設定する場合に、表示する文字列を指定します。参照する場合は使用しません。

サンプルソースです。

続きを読む "ウィンドウのステータスバーに文字列を表示する" »

2006年04月10日

JavaScript を使って別ウィンドウを開いた際に、イベントパンドラを使って 親ウィンドウ(別ウィンドウを開いた元のページ)から 子ウィンドウの表示内容を操作することができます。

サンプルです。ラジオボタンをチェックしてください。子ウィンドウが開いて、説明のページが表示されます。

タイリクモモンガ
ミケリス
ニホンリス

このソースで使用しているJavaScriptは、下記の通りです。

続きを読む "JavaScriptを使って別ウィンドウの表示内容を操作する" »

2006年01月31日

ホームページやブログなどのウェブサイトで、JavaScriptのwindow.open() を使ってウィンドウを開く際に、さまざまなスタイルを指定することができます。基本形は、下記のようになりますが、

<a href="javascript:void(0)" onclick=window.open('ジャンプ先URL','ウィンドウの指定','スタイルの指定')">表示文字</a>
  1. ジャンプ先URL:ジャンプ先のURLを、絶対パスで指定します。
  2. ウインドウの指定:下記の中から指定できます。省略すると、今のウィンドウがジャンプ先のURLに切り替わります。今のウィンドウを残したい場合は、『_blank』とするとよいでしょう。
    _top今のフレームのトップページ(フレームが属するウィンドウ)
    _blank新しいウィンドウを開く
    _self今のフレームまたはウィンドウ
    _parent今のフレームを取り囲む一つ上の親フレーム
  3. スタイルの指定:ウィンドウの大きさや、メニューバーの有無など。

スタイルの指定の部分で、さまざまな設定をすることができます。ここで使用できるスタイルの一覧をご紹介します。複数の指定をする場合は、

<a href="javascript:void(0)" onclick="window.open('XXX.html', '_blank', 'width=500,height=210,resizable=no');>
のように、同一シングルクォート内でカンマで区切って指定します。シングルクォート内にスペースがあると正しく認識しないブラウザがありますのでご注意ください。

『 yes/no 』の部分は、『 yes 』または『 no 』で指定してください。『ピクセル値』の部分は、数字を単位無記入で入力してください。ピクセル指定になります。

対応欄は、Netscape と InternetExplorer の対応バージョンを示しています。対応していないブラウザでは指定は無視されますので、期待通りに表示されないことがあります。

一覧表です。

続きを読む "window.open() のスタイル指定一覧" »

JavaScript の window.open() を使って別のページにジャンプしたり、新規ウィンドウを開く際 にウィンドウのサイズを変更されたくない場合は、あらかじめ 開くウィンドウのサイズと、サイズ変更を禁止して開くようにすると良いでしょう。反対に、ウィンドウのサイズ変更を可能に指定することもできます。

設置例

JavaScript でジャンプする際の基本形は 下記のようになりますが、

<a href="javascript:void(0)" onclick=window.open('ジャンプ先URL','ウィンドウの指定','スタイルの指定')">表示文字</a>
  1. ジャンプ先URL:ジャンプ先のURLを、絶対パスで指定します。
  2. ウインドウの指定:下記の中から指定できます。省略すると、今のウィンドウがジャンプ先のURLに切り替わります。今のウィンドウを残したい場合は、『_blank』とするとよいでしょう。
    _top今のフレームのトップページ(フレームが属するウィンドウ)
    _blank新しいウィンドウを開く
    _self今のフレームまたはウィンドウ
    _parent今のフレームを取り囲む一つ上の親フレーム
  3. スタイルの指定:ウィンドウの大きさや、メニューバーの有無などさまざまなスタイル指定をすることができます。
    →各種スタイル指定についてはこちら 『window.open()スタイル指定一覧

スタイルの指定の部分で、ウィンドウのサイズを指定することができます。resizable=noとすることで、開かれたウィンドウはサイズの変更ができなくなります。反対に、yesにすれば、サイズ変更が可能です。

このサンプルのソースは、下記のようになります。

続きを読む "ウィンドウのサイズ変更を禁止する" »

簡単なJavaScriptを使って、ウィンドウの位置や大きさを指定することができます。これらに関するJavaScript のメソッドは、次のようになります。

ウィンドウ位置を指定する
ウィンドウ名.moveTo( 左上端のX座標 , 左上端のY座標 )
ウィンドウ位置を相対的に変更する
ウィンドウ名.moveBy( X方向の移動量 , Y方向の移動量 )
ウィンドウの大きさを指定する
ウィンドウ名.resizeTo( ウィンドウの幅 , ウィンドウの高さ )
ウィンドウの大きさを相対的に変更する
ウィンドウ名.resizeBy( X方向の移動量 , Y方向の移動量 )
  1. ウィンドウ名:位置やサイズを変更するウィンドウの名前を指示します。自ウィンドウの操作の場合は省略して構いません。
  2. 左上端のX座標/左上端のY座標:ウィンドウを表示させたい場所の、モニタ上の座標位置を指定します。
  3. X方向の変更量/Y方向の変更量:現在の位置から、ここで指定した分だけウィンドウを移動させます。リロードするたびに指定した量だけ移動していきます。
  4. ウィンドウの幅/ウィンドウの高さ:単位なしの数字で記述します。ピクセル値として扱われます。

このページのソースは、次のようになっています。(ウィンドウの位置やサイズの指定にかかわらない部分は簡略化しています。ご了承ください。)

続きを読む "ウィンドウの位置や大きさを指定する" »

ホームページやブログなどのウェブサイトで JavaScript の window.open() を使って、ポップアップウィンドウを開くことができます。

ポップアップウィンドウを開くために使用する JavaScrip のメソッドは、次のようになります。

ウィンドウ名=window.open( '表示させるページのURL' , '_blank' , 'オプション値' )
  1. ウィンドウ名:省略可能ですが、親ウィンドウから表示内容を操作したい場合は、指定しておく必要があります。
  2. 表示させるページのURL:ポップアップで開いたウィンドウに表示させるページのURLを指定します。
  3. オプション値:表示位置や、ウィンドウのサイズ、メニューバーやスクロールバーの有無などいろいろの指定ができます。詳細は、別ページで紹介していますので参考にしてください。→window.open() のスタイル指定一覧

サンプルページです。下記リンクをクリックすると、『ポップアップテスト画面』 というウィンドウが開きますが、一緒に ポップアップウィンドウとして、『ポップアップ画面』 というウィンドウが開きます。
※ブラウザのセキュリティの設定で ポップアップをブロックしている場合は、ポップアップを許可してご覧ください。

上記サンプルページのソースは次のようになります。(ポップアップウィンドウを開く操作にかかわらない部分は、簡略化していますのでご了承ください。)

続きを読む "ポップアップウィンドウを開く" »

JavaScriptの、window.open() を使って新規ウィンドウを開く際に、メニューバーやツールバーの有り無しを指定することができます。

新規ウィンドウを開く際の基本形は、下記のようになります。

<a href="javascript:void(0)" onclick="window.open(ジャンプ先URL', 'ウィンドウの指定', 'スタイル指定');">
  1. ジャンプ先URL:ジャンプ先のURLを、絶対パスで指定します。
  2. ウインドウの指定:下記の中から指定できます。省略すると、今のウィンドウがジャンプ先のURLに切り替わります。今のウィンドウを残したい場合は、『_blank』とするとよいでしょう。
    _top今のフレームのトップページ(フレームが属するウィンドウ)
    _blank新しいウィンドウを開く
    _self今のフレームまたはウィンドウ
    _parent今のフレームを取り囲む一つ上の親フレーム
  3. スタイルの指定:ここで menubar=no,toolbar=no すると、メニューバーとスクロールバーを非表示に設定できます。反対に yes にすれば、表示の指定になります。
    この他にもウィンドウの大きさや、スクロールバーの有無などさまざまなスタイル指定をすることができます。この場合、,(半角カンマ)で区切って併記します。
    →その他の指定はこちら 『window.open()スタイル指定一覧

このサンプルのソースは、下記のようになります。

続きを読む "メニューバーやスクロールバーの有無を指定する" »

ホームページやブログなどのウェブサイトで 他のページにジャンプする際に、簡単なJavaScriptを使って、大きさを指定して開くことができます。window.open() を使います

<a href="javascript:void(0)" onclick=window.open('ジャンプ先URL','ウィンドウの指定','スタイルの指定')">表示文字</a>
  1. ジャンプ先URL:ジャンプ先のURLを、絶対パスで指定します。
  2. ウインドウの指定:下記の中から指定できます。省略すると、今のウィンドウがジャンプ先のURLに切り替わります。今のウィンドウを残したい場合は、『_blank』とするとよいでしょう。
    _top今のフレームのトップページ(フレームが属するウィンドウ)
    _blank新しいウィンドウを開く
    _self今のフレームまたはウィンドウ
    _parent今のフレームを取り囲む一つ上の親フレーム
  3. スタイルの指定:ここでウィンドウの大きさを指定します。『width=500,height=200』というように、幅と高さを,(半角カンマ)で区切って指定します。
    そのほかにも、メニューバーやスクロールバーの有無など、さまざまな指定をすることができます。
    詳細はこちらをご覧ください→window.open() のスタイル指定一覧

設置例です

続きを読む "大きさを指定してウィンドウを開く" »

2006年01月29日

ホームページやブログなどのウェブサイトに 簡単な JavaScriptを使って、今開いているウィンドウを閉じるリンクやボタンを作ることができます。ホームページやブログのどこに貼ってもOKです。

<a href="javascript:void(0)" onclick="window.close();">表示文字</a>

という記述になります。意図しないのに勝手にウィンドウが閉じられてしまわないように、自分で開いたウィンドウ以外を閉じる時には本当にウィンドウを閉じても良いか確認のダイアログが表示されます。

設置例です。

続きを読む "ウィンドウを閉じる" »

2006年01月25日

ホームページやブログなどのウェブサイトで 他のページにジャンプする際に、簡単なJavaScriptを使うと、ウィンドウの大きさや、メニューバーやスクロールバーの有無などのスタイルを指定して開くことができます。JavaScriptの、window.open() を使います。

<a href="javascript:void(0)" onclick="window.open('ジャンプ先URL','ウィンドウの指定','スタイルの指定')">表示文字</a>
  • ジャンプ先URL:ジャンプ先のURLを、絶対パスで指定します。
  • ウインドウの指定:下記の中から指定できます。省略すると、今のウィンドウがジャンプ先のURLに切り替わります。今のウィンドウを残したい場合は、『_blank』とするとよいでしょう。
    _top今のフレームのトップページ(フレームが属するウィンドウ)
    _blank新しいウィンドウを開く
    _self今のフレームまたはウィンドウ
    _parent今のフレームを取り囲む一つ上の親フレーム
  • スタイルの指定:ウィンドウの大きさや、メニューバーの有無などさまざまなスタイル指定をすることができます。

設置例です

続きを読む "ウィンドウを開く" »

IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス