web-dev-qa-db-ja.com

ポップアップウィンドウから親ウィンドウにデータを渡す方法は？

ポップアップウィンドウから親ウィンドウでデータを渡したり、関数を呼び出したりするにはどうすればよいですか？

ユーザーが同じWebサイトでポップアップを開くリンクをクリックします。ポップアップが終了したら、新しいデータを親ウィンドウに送り返すか、親ウィンドウで関数を呼び出します。

javascriptjquerypopup
17
Click Upvote

window.opener オブジェクトはあなたが探しているものであり、親ウィンドウの関数を呼び出すためにポップアップ内から使用します。

window.opener.yourFunc()
26
Hoff

これは楽しくて簡単なデモで、 同様の質問に対するこの回答 （ただし、私自身の目的のために変更されています）に大きく影響を受けています調査を支援するために 私のキャリアの中で最も難しいバグ ）。

次のように（同じディレクトリに）2つのファイルを作成します。

parent.html

<button type="button" onclick="popup('popup.html', '', 800, 200);">Add My Card</button>
=&gt;
<span id="retrievedData">No data yet.</span>    
<script>
    function popup(url, title, width, height) {
        var left = (screen.width / 2) - (width / 2);
        var top = (screen.height / 2) - (height / 2);
        var options = '';    
        options += ',width=' + width;
        options += ',height=' + height;
        options += ',top=' + top;
        options += ',left=' + left;    
        return window.open(url, title, options);
    }

    function setData(data) {
        console.log(data);
        var strData = JSON.stringify(data);
        document.getElementById('retrievedData').innerHTML = strData;
        var requestBinUrl = 'http://requestb.in/18u87g81';
        window.location.href = requestBinUrl + '?data=' + strData;
    }
</script>

popup.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="popupForm" name="f">    
    <select id="urlField" name="url">
        <option>
            http://date.jsontest.com/
        </option>
        <option>
            http://time.jsontest.com/
        </option>
        <option>
            http://md5.jsontest.com/?text=HereIsSomeStuff
        </option>    
    </select>
    <div><input type="submit" /></div>    
</form>
<script>
    $('#popupForm').submit(function(e) {
        e.preventDefault();
        var url = $('#urlField').val();
        console.log(url);
        $.ajax({
            url: url
        }).then(function(data) {
            console.log(JSON.stringify(data));
            window.opener.setData(data);
            window.close();
        });
    });    
</script>
4
Ryan