如何从弹出窗口调用父函数？

Question

我有一个函数 showMap，它会打开一个新窗口（window.open）。在新窗口中，我有一个 iframe googlemaps 和一个带按钮的输入。当用户单击按钮时，我如何将数据传递给父窗口？

var popUpWindow ;
function showMap(){
     popUpWindow = window.open(index)
     popUpWindow.document.write( '<html><head><title>MAP</title>
     </head><body>
     <iframe src="https://maps.google.com/maps/embed/v1/directions?> 
     </iframe> <br> <input type="text" id="data> 
     <button type="button" onclick="opener.callParent()">
      Update</button></body></html');
}

function callParent(){
  var newValue = popUpWindow.document.getElementById('data').value;
  console.log('newVal',newValue);
}

以这种方式我能够从子窗口获取值到父窗口。

Answer 1

在该新弹出窗口下检查window.opener global

Answer 2

您可以使用 ES6 导入/导出。

为此，首先导出父函数，然后导入它并在模态中使用。

另一种但危险的方法是使用全局窗口范围来实现您要调用的方法。