HOME

初級者のための初級者による		 HTMLタグ一覧 | FAQ FAQ | サイトマップ サイトマップ | お問い合わせ お問い合わせ
ホームページの作り方講座
ちょっと差のつくテクニック＞JavaScript で遊ぼう＞自分ではない他のウィンドウを閉じる
ホームページ作りの準備
１． ホームページとは？
２． ホームページの構造
３． ホームページ作りの手順
４． スペースの用意
５． ソフトウェアの用意
６． 素材の用意

ホームページの作り方
１． サンプルを作ってみよう
２． HTMLを編集しよう
３． データを転送しよう

ちょっと差のつくテクニック
１． ちょっと便利なHTML
２． JavaScript で遊ぼう
３． 掲示板で盛りあがろう
４． ｉモードのホームページ

要チェックな参考資料集
１． 参考ページリンク集
２． ホームページタブー20
３． 参考になる書籍集
４． その他お役立ちリンク集


ちょっと差のつくテクニック

JavaScript で遊ぼう

自分ではない他のウィンドウを閉じる

この JavaScript を記述したウィンドウをクリックで閉じます。

サンプル

新しいウィンドウを開く

開いたウィンドウを閉じる

設置方法

以下を <head> 内に貼りつけてください。

<script language="JavaScript">
<!--
function OpenWindow(URL,Winname,Width){
SubWindow=window.open(URL,Winname,
"width=650,resizable=yes,scrollbars=yes,toolbar=no,location=no,status=no,directories=no"
);
}
// -->
</script>

「width」はウィンドウの横幅を指定し、「resizable」はウィンドウをユーザーの操作で拡大・縮小できるかを指定、「scroolbars」、「toolbar」、「location」、「status」、「directories」は、それぞれスクロールバーを表示するか、ツールバーを表示するか、ロケーションバーを表示するか、ステータスバーを表示するか、を指定します。

その他、設定できる項目がありますが、それらは以下の「参考 TIPS」を参照してください。

つづいて、 以下の新しいウィンドウを開くための記述を、<body> 内の任意の箇所に貼りつけてください。「リンク先の URL」には、リンク先の URL を記述し、「ウィンドウの名前」には、ウィンドウにつける名前を記述、「テキストリンクまたは画像」の部分を適宜変更してください。なお、複数のウィンドウを開く場合は、「ウィンドウの名前」を、それぞれのリンク箇所において変えてください。

<a href="javascript:OpenWindow('リンク先 URL','ウィンドウの名称');">
テキストリンクまたは画像
</a>

そして、ウィンドウを閉じるための記述を、<body> 内のファイルの任意のリンク箇所 (クリックすることでウィンドウを閉じさせる機能を持たせたい箇所) に貼りつけてください。「テキストリンクまたは画像」の部分を、適宜変更してください。

<a href="javaScript:SubWindow.close();">
テキストリンクまたは画像
</a>

　

【参考 TIPS】(新しく開くウィンドウの詳細を設定する)

以下、JavaScript で新しいウィンドウを開くときに設定できる項目です。

height=n ウィンドウの高さ。
width=n ウィンドウの横幅。
top=n ウィンドウの位置（画面の上端からの距離）。(screenY=n)
left=n ウィンドウの位置（画面の左端からの距離）。(screenX=n)
location=yes|no 場所ツールバーを表示する。
menubar=yes|no メニューバーを表示する。
resizable=yes|no リサイズを可能にする。
scrollbars=yes|no スクロールバーを表示する。
status=yes|no ステータスバーを表示する。
toolbar=yes|no ツールバーを表示する。
directories=yes|no ユーザ設定ツールバーを表示する。

サンプルメーカー

下 (↓) のテキストボックス「表示するメッセージ」にテキストリンク箇所のための文字列をいれて「サンプルを作成する」ボタンを押してください。
自分ではない他のウィンドウを閉じるための HTML が生成されます。 「サンプル HTML」の内容をコピーしてお使いください。3 つの部分からなりますが、それぞれ適切な場所にコピーしてください。

ウィンドウ
サイズ		 横 ピクセル (半角数字で)
縦 ピクセル
スクロール
バー
ツールバー
ロケーション
ステータス
バー
ユーザー設定
ツールバー
リンク先 URL
　 ↓

↓
サンプル
HTML
(HEAD 部分)
サンプル
HTML
(BODY 部分(1))
(ウィンドウを開く)
サンプル
HTML
(BODY 部分(2))
(ウィンドウを閉じる)

　
TOP ↑
・広告掲載・リンクのご要望はお問い合わせフォームよりお願いいたします。→お問い合わせフォーム
・ホームページ作りの基本編を、オフラインでも、印刷して手元でも読めるテキストブックにしました→テキストブックのダウンロード
©初級者のための初級者によるホームページの作り方講座 since 1997