如何将数据从弹出窗口传递给父窗口？

Question

如何从弹出窗口传递一些数据或在父窗口上调用函数？

用户将点击一个链接，该链接将在弹出窗口完成后，在同一网站上打开一个弹出窗口，我希望它将新数据发送回父窗口，或者在父窗口调用一个函数。

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>