サブウィンドウから値を取得するjavascript

javascriptでサブウィンドウからメインウィンドウに値を返す方法。

Chrome ver.37からモーダルダイアログが利用できなくなっため、window.openから値を返す方法を紹介します。

IE限定などの制限をつけるならば、ウィンドウ制御が不要で扱いやすいため、モーダルダイアログを利用した方が良いでしょう。

こちらの記事が参考になります。

window.openで開いたサブウィンドウから値を返す方法

DEMOから開いたサブウィンドウのTextBoxに値を設定し閉じるボタンをクリックすると、以下のテキストボックスに値が設定されます。

DEMO

名前:
年齢:
メインウィンドウのHTMLソース
HTML(MainWindow)
<a class="demobtn" onclick="WindowOpen()">DEMO</a>
名前:<input type="textbox" id="txt1"><br />
年齢:<input type="textbox" id="txt2">
メインウィンドウから呼ばれるサブウィンドウのHTMLソース
HTML(SubWindow)
名前:<input type="text" value="" id="subtxt1" /><br />
年齢:<input type="text" value="" id="subtxt2" /><br /><br />
<input type="button" onclick="ReturnValue();" value="画面を閉じる">
メインウィンドウとサブウィンドウ共通のjavascript
javascript

function WindowOpen(){
    // メインウィンドウのテキストボックスのIDをパラメータで渡す
    window.open('http://webnonotes.com/demo/NewWindow.html?id=dummy&subtxt1=txt1&subtxt2=txt2','Window');
}


function ReturnValue(){
    
    // URLパラメータを"&"で分ける
    var query = location.search.substr(1).split('&');
    for(var i = 0; i < query.length; i++) {
        // "="の前後で分ける
        var key = query[i].split('=');
        // URLパラメータの最初はダミーなので除外する
        if(key[1] == 'dummy') continue;
        // メインウィンドウのテキストボックスに値を入れる
        window.opener.document.getElementById(decodeURIComponent(key[1])).value = document.getElementById(decodeURIComponent(key[0])).value;
    }
    // 画面を閉じる
    window.close();   
}

上記のサンプルソースではURLパラメータでメインウィンドウのIDを渡し、サブウィンドウでパラメータを分割してデータを入れています。

少し処理が長くなってしまいましたが、実際には以下の内容でメインウィンドウに値が渡せます。

javascript(SubWindow)
window.opener.document.getElementById('メインウィンドウのID').value = document.getElementById('サブウィンドウのID').value;

この処理でメインウィンドウの要素に値を設定できます。

「window.opener.document」で親のDOMにアクセスできるため、後は値を入れるだけです。

divider

Trackback URL

http://webnonotes.com/javascript-2/subwindow/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>