堀北真希うさぎ
主な作品
創作キャラクタのイラスト例とそれを組み込んだアニメーション動画

ページ案内▼

開いたウインドウから元のウインドウのページを変える。

「新しいウインドウを開く」で開いたウインドウから、元のウインドウの表示ページを切替えるスクリプトです。

開いたウインドウから元のウインドウのページを変える・目次。

開いたウインドウから元のウインドウのページを変える見本。

以下にある見本ページへのリンクをJAVAスクリプトを実行できる環境で指定すると新しいウインドウで表示する筈です。

スクリプトのソース。

親ウインドウ側のスクリプト。

新しくウインドウを開くのに用いている「OperateNewWindow.js」は以下の通りです。「新しいウインドウを開く」とほぼ同じ内容です。

function popUpOpen() {
    var addr='OperateNewWindow2.html';
    if (document.layers) { addr='OperateNewWindow-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;
}

また、ここでネットスケープ 4.xに限り読込ませているダミーHTML「OperateNewWindow-Dummy.html」は、以下のようにしてページ読込み完了後に正規のページ「OperateNewWindow2.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='OperateNewWindow2.html';">
    <p><a href="OperateNewWindow2.html">リロード</a></p>
    </body>
</html>

新たに開いたウインドウ側のスクリプト。

新しく開いたウインドウに表示される「OperateNewWindow2.html」で実行するスクリプト「OperateNewWindow2.js」は以下の通りです。

function ParentWindow(url) {
    if (document.images) {
        window.opener.location.href=url;
        }
}

これらの処理はネットスケープ 2.xでは実行出来ない為、予めdocument.imagesオブジェクトの実装の有無を調べてネットスケープ 2.xを弾いています。

ここで重要なのは「window.opener.location.href=url;"」です。window.openerプロパティは、window.open()メソッドで開いたウインドウから見た、元のウインドウを表わすプロパティです。このプロパティをオブジェクトと捉えてlocation.hrefプロパティを用いています。尚値の「url」は函数の引数の「url」をそのまま使うという事です。

新たに開いたウインドウ側HTML文書。(平成17年 9月14日 修正)

一方、新しく開いたウインドウに表示される「OperateNewWindow2.html」にはリンクのアンカーに以下のような仕掛けが施されております。

<script type="text/javascript" charset="shift_jis" src="OperateNewWindow2.js"></script>
        …
<ul>
    <li><a href="http://www.yahoo.co.jp/" onclick="ParentWindow('http://www.yahoo.co.jp/');return(false);" onkeypress="if (event.keyCode==10) { ParentWindow('http://www.yahoo.co.jp/');return(false); } else return(true);">ヤフージャパン</a></li>
    <li><a href="OperateNewWindow.html" onclick="ParentWindow('OperateNewWindow.html');return(false);" onkeypress="if (event.keyCode==10) { ParentWindow('OperateNewWindow.html');return(false); } else return(true);">元のページ</a></li>
    </li>

<script>要素は、HTML文書を出力するものでは無いので、<head>要素内に書く事にします。

リンクを指定すると、onclick属性で指定された「ParentWindow('URL')」が実行されて、親ウインドウに当該リソースが表示されます。

その後「return(false)」が実行されて、<a>要素のリンク処理が中断されるので、元のウインドウにもhref属性で指定されたリソースが表示されると言う事はありません。

一方、JAVAスクリプトが実行されない環境では(その場合、このページは元のウインドウに表示されるようになっています)、このリンクもまた、元のウインドウへのリンクとして機能するようにhref属性値を定めております。

要するにJAVAスクリプトが無くても実用上は困らない程度の機能を提供するのが肝要と言う事です。

注意事項。

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

marguerite.site@gmail.com