Perl/ActivePerl For UNIX/Linux/Windows
 
TryThe Homepage
初めてのCGI
CGI 研究室
ダイナミックCGI
ダウンロード
サービス
サーバ構築(Windows)
データベースアクセス
有料サービス
FAQ
お問い合わせ
このページを印刷
WindowとDocument
ブラウザのウィンドウと、ドキュメントに関するDHTMLです。 新しいウィンドウに直接ドキュメントを記述したり、既に表示されているドキュメントを変更する事もできます。
  • ウィンドウのオープン
    本コーナーでも使用されていますが、指定された位置に指定された大きさで新しいウィンドウをオープンします。
    window.open('☆','★','オプション');
    ☆=オープンしてウィンドウに表示するページのパス
    ★=ウインドウの名称
    オプションには次のパラメータを設定することができます。
    width=ウィンドウの幅
    height=ウィンドウの高さ
    left=表示するウィンドウの左座標
    top=表示するウィンドウの上座標
    scrollbars=スクロールバーの表示yes/no
    オプションはカンマ「,」で区切って指定します。
    <input type=button value=新しいウィンドウ
    onclick="mywin=window.open('','','width=640,height=480,left=100,top=100,scrollbars=yes')"><p>
    表示ページ、ウィンドウの名称は未設定、幅=640、高さ=480のウィンドウをスクロールバー付きで表示
    <p>
    <input type=button value=新しいウィンドウ onclick="mywin=window.open()"><p>
    すべてを省略すると新しいブラウザを表示します。


  • ウィンドウを閉じる
    開いたウィンドウを閉じるにはwindow.closeを使用します。
    <input type=button value=新しいウィンドウ
    onclick="mywin=window.open('','','width=640,height=480,left=100,top=100,scrollbars=yes')"><p>
    表示ページ、ウィンドウの名称は未設定、幅=640、高さ=480のウィンドウをスクロールバー付きで表示
    <p>
    <input type=button value=ウィンドを閉じる onclick="mywin.close()"><p>
    <input type=button value=自分自身を閉じる onclick="window.close()"><p>

    自分自身が親ウィンドウの場合は、閉じることはできません。

  • ウィンドウへの書き出し
    新しくオープンしたウィンドウにドキュメントを書き出すにはdocument.writeを使用します。
    document.writeは、新しいウィンドウだけでなく、現在のウィンドウもclose前で有れば使用できますが、 ここでは新しいウィンドウへの書き出しをご紹介します。
    <form name=Myform>
    テキストエリアに記入した内容を別ウィンドウに表示します。<p>
    <textarea name=Doc rows=5 cols=40></textarea><p>
    <input type=button value=新しいウィンドウ onclick="newwin()"><p>
    </form>
    <script>
      function newwin() {
        var Mywin=window.open('','','width=640,height=480,left=100,top=100,scrollbars=yes');
        Mywin.document.open();
        Mywin.document.write(document.Myform.Doc.value);
        Mywin.document.close();
      }
    </script>

    書き出し後にはdocument.closeを指定しなければなりません。document.closeを省略するとブラウザは読み込みを終了しません。
    また、document.close後にはdocument.writeでドキュメントを追加することはできません。

  • ドキュメントの変更
    既に表示されているドキュメントを変更する場合は、innerHTMLを使用します。
    innerHTMLを使用する場合は、予めスタイルでオブジェクトを作成しておく必要があります。
    <form name=Myform>
    <div id=divarea>ここの領域が変わります。</div><p>
    テキストエリアに記入した内容を上に表示します。<p>
    <textarea name=Doc rows=5 cols=40><img src=images/Papio.gif></textarea><p>
    <input type=button value=変更する onclick="newdoc()"><p>
    </form>
    <script>
      function newdoc() {
        var objid=document.getElementById('divarea');
        objid.innerHTML=document.Myform.Doc.value;
      }
    </script>

    サンプルのように、置き換えるドキュメントは、文字だけでなく、HTMLタグを含む事もできます。
    お気づきの方も多いかと思いますが、本コーナーのサンプルは、実際にサンプルページを用意しているのではなく、 テーブル内のサンプルドキュメントのタグをinnerHTMLで読み取り、別ウィンドウで表示しています。

Copyright 2004 Terra. All rights reserved. No reproduction or republication without written