一定時間後に自動でウィンドウを閉じる
JavaScriptを使って開いたポップアップウィンドウなどを、一定時間後に自動で閉じることができます。下記のリンクをクリックするとポップアップでサンプルページが開きますが、このウィンドウは3秒後に自動で閉じるように設定されています。
このサンプルのソースは、次のようになっています。
TOPページ ＞ ウィンドウを開く、閉じる、制御する
ウィンドウを開く、閉じる、制御する
ウィンドウを開く、閉じる、制御する
ブログでも使える簡単なJavaScriptをご紹介します。JavaScriptを使えば、マウスが重なったときに色や表示内容を変えるなど、ページを動的に変化させることができます。
HTMLは基本的に大文字でも小文字でもかまいませんが、JavaScriptは大文字・小文字を区別しますので ソースは正しく記述しましょう。
2006年05月29日
2006年04月12日
ウィンドウをスクロールさせて表示する
簡単な JavaScript を使って、ウィンドウの表示内容をスクロールさせることができます。
※このサンプルは、インラインフレームで別ページをブログに埋め込んであります。
ページのスクロールに関連する JavaScript のメソッドおよびプロパティは、下記のようになります。
確認メッセージを表示する
簡単な JavaScript を使って、ホームページやブログなどのウェブサイトに OKボタンと キャンセルボタン のある確認ダイアログを表示することができます。confirmプロパティを使用します。
OKボタンがクリックされた場合は true、キャンセルボタンがクリックされた場合は false が値として返されます。
いずれかのボタンが押されるまで、スクリプトは次の処理へ進みません。また この間は、ブラウザの操作もできません。
変数名 = ウィンドウまたはフレーム名.confirm(ダイアログに表示する文字列)
- 変数名：このダイアログは、OKボタンがクリックされた場合は true、キャンセルボタンがクリックされた場合は false が値として返されます。この値を代入する変数を指定します。
- ウィンドウまたはフレーム名：警告ダイアログを表示するウィンドウまたはフレーム名を指定します。省略可能です。
- ダイアログに表示する文字列：ダイアログに表示する文字列を改行したい場合は、 ¥n を挿入します。¥t を挿入すると、タブを入れることもできます。
サンプルのダイアログです。
警告メッセージを表示する
簡単な JavaScript を使って、ホームページやブログなどのウェブサイトに OKボタンのある警告ダイアログを表示することができます。alertプロパティを使用します。
OKボタンがクリックされるか、[ X ] ボタンでダイアログが閉じられるまで、スクリプトは次の処理へ進みません。また この間は、ブラウザの操作もできません。
ウィンドウまたはフレーム名.alert(ダイアログに表示する文字列)
- ウィンドウまたはフレーム名：警告ダイアログを表示するウィンドウまたはフレーム名を指定します。省略可能です。
- ダイアログに表示する文字列：ダイアログに表示する文字列を改行したい場合は、 ¥n を挿入します。¥t を挿入すると、タブを入れることもできます。
サンプルソースです。このページを表示すると、確認ダイアログが出現します。
2006年04月11日
ウィンドウのステータスバーに文字列を表示する
ホームページやブログなどのウェブサイトを閲覧するブラウザのウィンドウのステータスバーに、文字列を表示することができます。statusプロパティを使用します。
ステータスバーの文字列を設定または参照する
ウィンドウ名.status = 文字列
ステータスバーの標準文字列を設定または 参照する
ウィンドウ名.defaultStatus = 文字列
- ウィンドウ名：ステータスバーに表示する文字列を設定または参照する対象のウィンドウ名を指定します。省略可能です。
- 文字列：ステータスバーに文字列を設定する場合に、表示する文字列を指定します。参照する場合は使用しません。
サンプルソースです。
2006年04月10日
JavaScriptを使って別ウィンドウの表示内容を操作する
JavaScript を使って別ウィンドウを開いた際に、イベントパンドラを使って 親ウィンドウ（別ウィンドウを開いた元のページ)から 子ウィンドウの表示内容を操作することができます。
サンプルです。ラジオボタンをチェックしてください。子ウィンドウが開いて、説明のページが表示されます。
このソースで使用しているJavaScriptは、下記の通りです。
2006年01月31日
window.open() のスタイル指定一覧
ホームページやブログなどのウェブサイトで、JavaScriptのwindow.open() を使ってウィンドウを開く際に、さまざまなスタイルを指定することができます。基本形は、下記のようになりますが、
<a href="javascript:void(0)" onclick=window.open('ジャンプ先URL','ウィンドウの指定','スタイルの指定')">表示文字</a>
- ジャンプ先URL：ジャンプ先のURLを、絶対パスで指定します。
- ウインドウの指定：下記の中から指定できます。省略すると、今のウィンドウがジャンプ先のURLに切り替わります。今のウィンドウを残したい場合は、『_blank』とするとよいでしょう。
_top 今のフレームのトップページ（フレームが属するウィンドウ） _blank 新しいウィンドウを開く _self 今のフレームまたはウィンドウ _parent 今のフレームを取り囲む一つ上の親フレーム - スタイルの指定：ウィンドウの大きさや、メニューバーの有無など。
スタイルの指定の部分で、さまざまな設定をすることができます。ここで使用できるスタイルの一覧をご紹介します。複数の指定をする場合は、
<a href="javascript:void(0)" onclick="window.open('XXX.html', '_blank', 'width=500,height=210,resizable=no');>
のように、同一シングルクォート内でカンマで区切って指定します。シングルクォート内にスペースがあると正しく認識しないブラウザがありますのでご注意ください。
『 yes/no 』の部分は、『 yes 』または『 no 』で指定してください。『ピクセル値』の部分は、数字を単位無記入で入力してください。ピクセル指定になります。
対応欄は、Netscape と InternetExplorer の対応バージョンを示しています。対応していないブラウザでは指定は無視されますので、期待通りに表示されないことがあります。
一覧表です。
ウィンドウのサイズ変更を禁止する
JavaScript の window.open() を使って別のページにジャンプしたり、新規ウィンドウを開く際 にウィンドウのサイズを変更されたくない場合は、あらかじめ 開くウィンドウのサイズと、サイズ変更を禁止して開くようにすると良いでしょう。反対に、ウィンドウのサイズ変更を可能に指定することもできます。
設置例
JavaScript でジャンプする際の基本形は 下記のようになりますが、
<a href="javascript:void(0)" onclick=window.open('ジャンプ先URL','ウィンドウの指定','スタイルの指定')">表示文字</a>
- ジャンプ先URL：ジャンプ先のURLを、絶対パスで指定します。
- ウインドウの指定：下記の中から指定できます。省略すると、今のウィンドウがジャンプ先のURLに切り替わります。今のウィンドウを残したい場合は、『_blank』とするとよいでしょう。
_top 今のフレームのトップページ（フレームが属するウィンドウ） _blank 新しいウィンドウを開く _self 今のフレームまたはウィンドウ _parent 今のフレームを取り囲む一つ上の親フレーム - スタイルの指定：ウィンドウの大きさや、メニューバーの有無などさまざまなスタイル指定をすることができます。
→各種スタイル指定についてはこちら 『window.open()スタイル指定一覧』
スタイルの指定の部分で、ウィンドウのサイズを指定することができます。resizable=noとすることで、開かれたウィンドウはサイズの変更ができなくなります。反対に、yesにすれば、サイズ変更が可能です。
このサンプルのソースは、下記のようになります。
ウィンドウの位置や大きさを指定する
簡単なJavaScriptを使って、ウィンドウの位置や大きさを指定することができます。これらに関するJavaScript のメソッドは、次のようになります。
ウィンドウ位置を指定する
ウィンドウ名.moveTo( 左上端のX座標 , 左上端のY座標 )
ウィンドウ位置を相対的に変更する
ウィンドウ名.moveBy( X方向の移動量 , Y方向の移動量 )
ウィンドウの大きさを指定する
ウィンドウ名.resizeTo( ウィンドウの幅 , ウィンドウの高さ )
ウィンドウの大きさを相対的に変更する
ウィンドウ名.resizeBy( X方向の移動量 , Y方向の移動量 )
- ウィンドウ名：位置やサイズを変更するウィンドウの名前を指示します。自ウィンドウの操作の場合は省略して構いません。
- 左上端のX座標/左上端のY座標：ウィンドウを表示させたい場所の、モニタ上の座標位置を指定します。
- X方向の変更量/Y方向の変更量：現在の位置から、ここで指定した分だけウィンドウを移動させます。リロードするたびに指定した量だけ移動していきます。
- ウィンドウの幅/ウィンドウの高さ：単位なしの数字で記述します。ピクセル値として扱われます。
このページのソースは、次のようになっています。（ウィンドウの位置やサイズの指定にかかわらない部分は簡略化しています。ご了承ください。）
ポップアップウィンドウを開く
ホームページやブログなどのウェブサイトで JavaScript の window.open() を使って、ポップアップウィンドウを開くことができます。
ポップアップウィンドウを開くために使用する JavaScrip のメソッドは、次のようになります。
ウィンドウ名=window.open( '表示させるページのURL' , '_blank' , 'オプション値' )
- ウィンドウ名：省略可能ですが、親ウィンドウから表示内容を操作したい場合は、指定しておく必要があります。
- 表示させるページのURL：ポップアップで開いたウィンドウに表示させるページのURLを指定します。
- オプション値：表示位置や、ウィンドウのサイズ、メニューバーやスクロールバーの有無などいろいろの指定ができます。詳細は、別ページで紹介していますので参考にしてください。→window.open() のスタイル指定一覧
サンプルページです。下記リンクをクリックすると、『ポップアップテスト画面』 というウィンドウが開きますが、一緒に ポップアップウィンドウとして、『ポップアップ画面』 というウィンドウが開きます。
※ブラウザのセキュリティの設定で ポップアップをブロックしている場合は、ポップアップを許可してご覧ください。
上記サンプルページのソースは次のようになります。（ポップアップウィンドウを開く操作にかかわらない部分は、簡略化していますのでご了承ください。）
メニューバーやスクロールバーの有無を指定する
JavaScriptの、window.open() を使って新規ウィンドウを開く際に、メニューバーやツールバーの有り無しを指定することができます。
新規ウィンドウを開く際の基本形は、下記のようになります。
<a href="javascript:void(0)" onclick="window.open(ジャンプ先URL', 'ウィンドウの指定', 'スタイル指定');">
- ジャンプ先URL：ジャンプ先のURLを、絶対パスで指定します。
- ウインドウの指定：下記の中から指定できます。省略すると、今のウィンドウがジャンプ先のURLに切り替わります。今のウィンドウを残したい場合は、『_blank』とするとよいでしょう。
_top 今のフレームのトップページ（フレームが属するウィンドウ） _blank 新しいウィンドウを開く _self 今のフレームまたはウィンドウ _parent 今のフレームを取り囲む一つ上の親フレーム - スタイルの指定：ここで menubar=no,toolbar=no すると、メニューバーとスクロールバーを非表示に設定できます。反対に yes にすれば、表示の指定になります。
この他にもウィンドウの大きさや、スクロールバーの有無などさまざまなスタイル指定をすることができます。この場合、,(半角カンマ)で区切って併記します。
大きさを指定してウィンドウを開く
ホームページやブログなどのウェブサイトで 他のページにジャンプする際に、簡単なJavaScriptを使って、大きさを指定して開くことができます。window.open() を使います。
<a href="javascript:void(0)" onclick=window.open('ジャンプ先URL','ウィンドウの指定','スタイルの指定')">表示文字</a>
- ジャンプ先URL：ジャンプ先のURLを、絶対パスで指定します。
- ウインドウの指定：下記の中から指定できます。省略すると、今のウィンドウがジャンプ先のURLに切り替わります。今のウィンドウを残したい場合は、『_blank』とするとよいでしょう。
_top 今のフレームのトップページ（フレームが属するウィンドウ） _blank 新しいウィンドウを開く _self 今のフレームまたはウィンドウ _parent 今のフレームを取り囲む一つ上の親フレーム - スタイルの指定：ここでウィンドウの大きさを指定します。『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の方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら
クリックをお願いします。
当サイト掲載カテゴリは
コンピュータとインターネット > データ形式 > HTML > リファレンス
コンピュータとインターネット > データ形式 > HTML > リファレンス
- HTMLの基礎
- スタイルシート（CSS）の記述
- 簡単JavaScript
- 簡単Perl/CGI
- 色を指定する/カラー見本
- 記事の投稿
- テーブルを作成する
- フィルタ（特殊）効果で文字や画像を修飾する
- フォームを作成する
- リンクを貼る
-
文字を修飾する（書体、色、大きさなど...）
- 文字の大きさを指定する（FONTタグ）
- 文字の修飾方法を指定する
- 文字を点滅させる
- ルビ（ふりがな）の位置揃えを指定する
- ルビ（ふりがな）の表示位置を指定する
- 文字にルビ（ふりがな）を付ける
- 文章の一部にスタイルを適用する
- 文字を等幅文字にする
- 文章の書体、サイズ、行の高さ、スタイルをまとめて指定する
- 文章の書体を指定する（スタイル指定）
- 文章の段落を指定する
- 文字をイタリック/斜体にする
- 文字の書体を指定する（専用タグ）
- 文字に下線をつける（アンダーライン）
- 文字を見え消しにする（取消線）
- 文字を強調する
- 文字の太さを指定する
- 文字を太字にする
- 上付き/下付き文字にする
- 文字の色を変える
- 文字を一段大きく/小さくする
- 文字の大きさを指定する（スタイル指定）
-
文章を修飾する（背景色、画像、枠など...）
- フィールド指定して文章を枠で囲む
- 文字や文章、画像の行揃えを指定する
- 文章や文字、画像を囲む枠の太さ、色、種類をまとめて指定する
- 文章や文字、画像を囲む枠の種類を指定する
- 文字や文章、画像を囲む枠の色を指定する
- 文章や文字、画像を枠で囲む
- マージンとパディングの違い
- 余白を入れる（パディング）
- 余白を入れる（マージン）
- 改行する/改行を禁止する
- 文章の背景色、背景画像、配置方法をまとめて指定する
- 文字や文章、テーブルなどの背景画像の位置を指定する
- 文章の背景に画像を固定表示する
- 文章の背景に指定した画像を繰返し表示する
- 段落文章の横幅を指定する
- 文章の行間隔を指定する
- 文章の背景画像を指定する
- 文章の背景色を指定する
- 段落の表示（表示位置、表示/非表示など...）
- 水平線を表示する
- 特殊文字、その他
- 画像を表示する/動画/サウンド
- 箇条書きにする