Jak przekazać dane do okna nadrzędnego z okna wyskakującego?

Question

Jak mogę przekazać dane lub wywołać funkcję w oknie nadrzędnym z okna podręcznego?

Użytkownik kliknie link, który otworzy popup na tej samej stronie, po zakończeniu wyskakującego okienka, chcę, aby wysłać nowe dane z powrotem do okna nadrzędnego lub zadzwonić do funkcji w oknie nadrzędnym .

Answer 1

Przedmiotem window.opener jest to, czego szukasz, używał go z poziomu popup jak tak nazywamy funkcją okna nadrzędnego:

window.opener.yourFunc() 

Answer 2

Tutaj jest łatwe i przyjemne, że demo jest silnie zainspirowany przez this answer to a similar question (ale zmodyfikowany do moich własnych celów, aby pomóc w badaniu the most difficult bug of my career).

Tworzenie 2 pliki (w tym samym katalogu) w następujący sposób:

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>