¿Cómo pasar datos a la ventana principal desde la ventana emergente?

Question

¿Cómo puedo pasar algunos datos o llamar a una función en la ventana principal desde una ventana emergente?

El usuario hará clic en un enlace que abrirá una ventana emergente en el mismo sitio web, una vez que termine con la ventana emergente, quiero que envíe los datos nuevos a la ventana primaria o llame a una función en la ventana principal .

Answer 1

El objeto window.opener es lo que está buscando, lo usaron desde dentro de su emergente al igual que para llamar a la función de la ventana padre:

window.opener.yourFunc() 

Answer 2

Aquí es un divertido y fácil de demostración que está fuertemente inspirado en this answer to a similar question (pero modificado para mis propios fines para ayudar a investigar the most difficult bug of my career).

crear 2 archivos (en el mismo directorio) de la siguiente manera:

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>