本日 　昨日
 
09/19(Thu) 08:08
o ボタンをクリックすると小ウィンドウをオープンする
【お知らせ】HTMLファイル指定による方法（2002/09/05）
この「小ウィンドウをオープンする」を、より簡単に実現できる「HTMLファイル指定による方法」がしょうさんの「パソコン講座」→「小ウィンドウを開く（window.open）」に紹介されてます。JavaScriptを使わずに、簡単に小ウィンドウを開くことができますのでお勧めです。
■関数 openWindow() を定義します。
  1. window.openのパラメータの説明

    第１パラメータ：オープンしたいHTML文のURL(省略可)。例のように小ウインドウをオープンする場合は指定しない。

    第２パラメータ：ウインドウ識別名(省略可)。ウインドウ識別名とは、<FORM>タグや<A>タグの"TARGET"で指定する識別名に使う。

    第３パラメータ：表示設定(省略可)。例は小ウインドウの大きさを指定。SCROLLBARS(スクロールバー表示)、TOOLBAR(ツールバー表示)、MENUBAR(メニューバー表示)、LOCATION(ロケーションバー表示)、STATUS(ステータスバー表示)などが指定できる。指定の仕方は、No.9のタロット占い参照。指定しない場合は表示しない。

  2. msgに小ウインドウに表示したい内容をHTML文で記述します。2行目のmsgは、クリックで小ウインドウを閉じるボタンの定義です。

  3. 表示する内容は例のように、"ウインドウに表示したい文章をここに書く" と文字列で書いてもよいし、HTML文で書いてもよい。No.13のおみくじも参考にして下さい。
【注意】広告バナーが自動的に表示されるプロバイダー(Geocitiesやfreewebなど)をご利用のユーザでスクリプトエラーが起こる時は下記の対処をして下さい。広告の挿入が、最初に見つけた<BODY>タグの直後にされるためスクリプトエラーになります。
  • 広告バナーの表示・非表示選択ができるユーザ。Geocitiesの場合はジオガイドマネージャーの「ジオガイドの調整」で、スクリプトを設置したファイルのジオガイドを表示しない設定に変更します。
  • 広告バナーの表示・非表示選択ができないユーザ。スクリプト本体を<HEAD>部ではなく<BODY>部(BODYタグの次行)に移動してください。

    <SCRIPT language="JavaScript"> <!-- function openWindow() { var myWindow = window.open("","myWin","height=100,width=200") if (myWindow != null) { msg = "<HTML><HEAD><TITLE>ウインドウオープン</TITLE></HEAD><BODY BGCOLOR=lime>" msg += "<CENTER>ウインドウに表示したい文章をここに書く</CENTER><P>" msg += "<FORM><CENTER><INPUT TYPE='button' VALUE='閉じる' onClick='window.close()'>" msg += "</CENTER></FORM></BODY></HTML>" myWindow.document.write(msg) myWindow.document.close() } } // --> </SCRIPT>

    ■ 小ウインドウをオープンするアンカーを本文に記述します。

    <center><form> <input type="button" value="ウインドウをオープンする" onclick="openWindow()"> </form></center>

    ■ 応用編

    ■文字列の代わりに、配列を使った応用例がNo.13おみくじ、No.9タロット占いにあります。参考にして下さい。

    ■小ウインドウから、メインウインドウ(元 html)を参照するには opener を使います。
    1. opener.document.bgColor="red"
    2. opener.location.href="test.htm"
    3. opener.location.href="http://kikuchisan.net/index.htm"
    4. windows.opener.close()
    5. opener.func()----メインウインドウで定義された関数 func()を参照。
    小ウインドウからメインウインドウの背景色を変える例。上の命令も同じように表記できます。 <form> <input type="button" onClick="opener.document.bgColor='red'" value="変更"> </form>

    ■メインウインドウ(元 html)から小ウインドウを参照するには小ウインドウ名を使います。

    var myWindow = window.open("","myWin","height=100,width=200")

    上の定義文の場合は myWindow になります。

    1. myWindow.document.bgcolor="red"
    メインウインドウから小ウインドウの背景色を変える例: <form> <input type="button" onClick="myWindow.document.bgColor='red'" value="変更"> </form>
    		•  
     
    ©1997- Kikuchisan's workshop All rights reserved //

    スポンサーリンク

    関連コンテンツ