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

Question

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

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

Answer 1

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

window.opener.yourFunc() 

Answer 2

すると、その楽しさと簡単なデモですthis answer to a similar questionに大いに触発されていますが（the most difficult bug of my careerの調査に役立つように私自身の目的に合わせて変更されています）

次のように（同じディレクトリにある）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>