Home > プログラミング > JavaScriptでウィンドウオブジェクトを名前で参照する場合のまとめ

JavaScriptでウィンドウオブジェクトを名前で参照する場合のまとめ

2010-04-20 (火) 3:53
プログラミング
JavaScript

web-browsers

Webブラウザにおいて、JavaScriptで window.open() の戻り値は、開いた子ウインドウオブジェクトの参照です。

var win = window.open(”url”, "windowName");
// win は子ウィンドウオブジェクトの参照

子ウィンドウからは、 window.opener で親ウィンドウオブジェクトを参照することができます。

また、ウィンドウ名からウインドウオブジェクトを参照することもできます。
Gecko DOM リファレンスの window.open には、ウィンドウ名からウインドウオブジェクトを参照する方法が記載されています。

url に空文字列を与えることは、ウィンドウのロケーションを変えずに、その名前によって開いたウィンドウの参照を得るための手段です。

window.open – Gecko DOM リファレンス

たとえば、Window 名が “windowName” である場合は次のようにします。

var win = window.open(””, "windowName");
// win はwindowName という名前のウィンドウオブジェクトの参照

上記のように、window.open() の第1引数を空文字列、第2引数にWindow名文字列を渡して呼び出すと、ウィンドウオブジェクトが取得できます。

ただ、上記動作を明記しているのは、Gecko DOM リファレンスの window.open にしか見当たらず、かつ、親子関係のないウィンドウにも上記動作が適用されるかどうかの記載がなかったため、さまざまなWebブラウザで挙動を検証してみました。

検証環境

手持ちの環境で検証してみました。

Web Browser	OS
Internet Explorer 8.0	WindowsXP SP3
Internet Explorer 6.0
Opera 10.51
Firefox 3.6.3
Chrome 4.1
Safari 4.0.5	Mac OS X 10.6.3

検証結果

親子関係のある親ウィンドウから、ウィンドウ名で参照

Web Browser	ローカル	同一ドメイン
Internet Explorer 8.0	○	○
Internet Explorer 6.0	○	○
Opera 10.51	○	○
Firefox 3.6.3	○	○
Chrome 4.1	○	○
Safari 4.0.5	○	○

親子関係があれば、テストした全ての環境で、子ウィンドウをウィンドウ名で参照することができました。
なお、親ウインドウをリロードしても、ウインドウ名で参照できました。
例えば window.open() の戻り値を、親ウィンドウの変数に保持し、親ウインドウをリロードした場合は、変数が初期化されてしまいますが、そのような場合でも、ウィンドウ名を使えば子ウィンドウを参照することができます。

別ウィンドウから、ウィンドウ名で参照

別のウィンドウを起動し、親子関係のない状態で検証しました。

Web Browser	ローカル	同一ドメイン	別ドメイン
Internet Explorer 8.0	○	○	×
Internet Explorer 6.0	○	○	×
Opera 10.51	○	○	×
Firefox 3.6.3	×	○	×
Chrome 4.1	×	×	×
Safari 4.0.5	○	○	○

まず、別ドメインからのウィンドウ名での参照はSafari を除きできません。
Chrome は親子関係が無い場合は、名前では参照できないようです。
IE, Opera, Firefox は、同一ドメインであれば、親子関係が無くても名前で参照することができました。

ということで、Chrome がだめなので、親子関係が無い場合は使えなさそうです。
イントラなどでWebブラウザの環境が限定できる場合は、ありかもしれません。

また、Safari は別ドメインでも参照できてしまいました。これはこれでマズイ気が・・・

※上記は私のテスト環境での結果なので、他の環境では違う可能性があります。

検証コード

以下、検証に使用したコードです。

親ウィンドウ `opener.html`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <title>親ウィンドウ</title>

    <script type="text/javascript">
        function openWindow() {
            window.open("child.html", "window1");
        }

        function referByWindowName() {
            var win = window.open("", "window1");
            window.alert(win.document.title);
        }
    </script>
</head>
<body>
親ウィンドウ
<form action="">
    <input type="button" value="Open Window" onclick="openWindow()" /><br/>
    <hr/>
    <input type="button" value="Refer By WindowName" onclick="referByWindowName()" />
</form>
</body>
</html>

子ウィンドウ `child.html`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <title>子ウィンドウ</title>
</head>
<body>
子ウィンドウ
</body>
</html>

別ウィンドウ `other.html`

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <title>別ウィンドウ</title>

    <script type="text/javascript">
        function referByWindowName() {
            var win = window.open("", "window1");
            window.alert(win.document.title);
        }
    </script>
</head>
<body>
別ウィンドウ
<form action="">
    <input type="button" value="Refer By WindowName" onclick="referByWindowName()" />
</form>
</body>
</html>