堀北真希うさぎ
主な作品
制作者作成のイラストと動画作品(例)

ページ案内▼

新しいウインドウを開く。

ポップアップウインドウを開くスクリプトです。

新しいウインドウを開く・目次。

新しいウインドウを開くスクリプトのサンプル。

スクリプトを実行できる環境なら、以下の見本ページへのリンクは、別ウインドウで開かれる筈です。

スクリプトが実行できない場合は、通常のリンクと変わらないでしょう。

新しいウインドウを開くスクリプトのソース。

新しいウインドウを開くスクリプト「NewWindow.js」は以下の通りです。

function popUpOpen() {
    var addr='NewWindow2.html';
    if (document.layers) { addr='NewWindow-Dummy.html'; }
    window.open(addr,"PopUp","width=640,height=360,toolbar=1,location=0,directories=0,status=1,menubar=0,scrollbars=1,resizable=1");
    return;
}

HTML側の処理。(平成17年 9月14日 修正)

HTML文書の<head>要素内で「NewWindow.js」を<script>要素で呼出し、アンカー側ではonclick属性でスクリプトを起動出来るようにします。

本来、キーボードのみでアクセスしている環境も想定してonkeypress属性も指定し、キーボード入力で同じ処理をするようにすることが求められていますが、実際には当該アンカーにフォーカスがある場合にはENTERキーなどの押下がマウスによるリンク指定と同じ働きをするため、onkeypress属性は不要です。それどころかonkeypress属性を指定すると、TABキーなどでカーソルを移動しようとしてもonkeypress属性の処理が優先されてカーソル移動が出来なくなると言う弊害もあります。(平成17年 9月14日 削除)

本来、キーボードのみでアクセスしている環境も想定してonkeypress属性も指定し、キーボード入力で同じ処理をするようにすることが求められていますが、この場合ENTERキー以外が押下された場合は何も処理しない方が寧ろ好ましいため、event.keyCodeプロパティがキーコードがENTERキーを表す「10」である場合に限りonclick属性と同じ処理を実行するようにしましょう。(平成17年 9月14日 追加)

<script type="text/javascript" charset="shift_jis" src="NewWindow.js"></script>
        …
<a href="NewWindow2.html" onclick="popUpOpen();return(false);" onkeypress="if (event.keyCode==10) { popUpOpen();return(false); } else return(true);">見本ページ</a>

スクリプトの構成。

スクリプトはonclick属性で実行させる事になっている函数「popUpOpen()」の本体のみです。

function popUpOpen() {
    var addr='NewWindow2.html';
    if (document.layers) { addr='NewWindow-Dummy.html'; }
    window.open(addr,"PopUp","width=640,height=360,toolbar=1,location=0,directories=0,status=1,menubar=0,scrollbars=1,resizable=1");
    return;
}

単純に「window.open()」メソッドで新しいウインドウを開くだけです。

しかし、ネットスケープ 4.xでは新たにウインドウを開いた直後に表示されたページで外部スクリプトなどがあるとスクリプトが正常に実行されないという不具合があります。この対策としてはページを再度表示させればよく、つまり一度ダミーページを表示させて然る後に本来の目的となるページを読ませればいいのです。

このため、ネットスケープ 4.xでwindow.openメソッドで開く際に読ませるページはダミーページとします。

ダミーページ「NewWindow-Dummy.html」は以下のようなHTMLとなります。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html;charset=shift_jis">
    <meta http-equiv="content-script-type" content="text/javascript">
    <title>ダミーHTML。</title>
    </head>
<body onload="location.href='NewWindow2.html';">
    <p><a href="NewWindow2.html">リロード</a></p>
    </body>
</html>

onload属性は<body>要素に認められる属性で、ページの読込みが完了した際に起動するスクリプトを指定するものです。ここでは、location.hrefプロパティに本来読込ませたい「NewWindow2.html」のURLを代入しています。つまり、このダミーページは読込みが完了すると直ちに「NewWindow2.html」に移動するようになっています。こうする事で、二度表示させる事が出来ます。

尚、ネットスケープ 4.x以外ではこのような問題は発生しません。従って、初めから目的のページ「NewWindow2.html」を読込ませても良いのですし、むしろその方が余計なトラフィックが生じないので却って良いでしょう。このため冒頭で、window.openメソッドで使われている変数addrに本来読込ませたい「NewWindow2.html」を代入しておき、document.layersが実装されている、すなわちネットスケープ 4.xの場合はダミーページ「NewWindow-Dummy.html」に変更します。

ウインドウを閉じるには。

ところで、開いたウインドウを閉じるにはどうしたらいいでしょうか。

幾つかの方法がありますが、ここでは開いたウインドウに閉じるためのリンクを張るやり方を解説します。

<a href="元のページのURL" onclick="window.close();return(false);" onkeypress="return(true);">このウインドウを閉じる。</a>

「window.close()」メソッドを用いる事で、当該文書を表示させているウインドウを閉じる事が出来ます。

しらぎくのウェブサイト作成入門サイトマップ

marguerite.site@gmail.com