如何將數據從彈出窗口傳遞給父窗口？

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>