| 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で読み取り、別ウィンドウで表示しています。
|
|
