Wie übertrage ich die Daten vom Popup-Fenster zum übergeordneten Fenster?

Question

Wie kann ich in einem Popupfenster einige Daten übergeben oder eine Funktion im übergeordneten Fenster aufrufen?

Der Benutzer wird auf einen Link klicken, der ein Popup auf der gleichen Website öffnet, sobald er mit dem Popup fertig ist, möchte ich die neuen Daten zurück zum übergeordneten Fenster senden oder eine Funktion im übergeordneten Fenster aufrufen .

Answer 1

Das window.opener Objekt ist das, was Sie suchen, verwendet es aus Ihrem Popup wie so die rufen eine Funktion des übergeordneten Fensters:

window.opener.yourFunc() 

Answer 2

Hier ist ein Spaß und einfach Demo dass ist stark von this answer to a similar question inspiriert (aber für meine eigenen Zwecke modifiziert, um zu helfen, the most difficult bug of my career zu untersuchen).

Erstellen 2-Dateien (im gleichen Verzeichnis) wie folgt:

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>