Question

我正在尝试让弹出窗口通知其父窗口，有些数据可用于父窗口。我正在使用的机制是dataavailable事件 - 弹出窗口创建它并将其发送给父级。父级侦听此类事件，并在事件发生时调用父级的事件处理程序。

问题是我试图在事件中实际传递一些数据。数据没有送到父母那里。

以下是父级test-parent.html的源代码：

<html>
<head>
<title>Test parent</title>
<script type="text/javascript">
function openPopup()
{
  window.open("test-popup.html", "popup", ['width=400', 'height=200']);
  window.addEventListener("dataavailable", onDataAvailableEvent, false);
}   

function onDataAvailableEvent(event)
{   
  alert("In onDataAvailableEvent(), " +
          "event.timeStamp '" + event.timeStamp + 
            "', event.eventType '" + event.eventType + "'");
}
</script>
</head>

<body> 
<input type="button" value="Open test-popup.html" onclick="openPopup()" />
</body>
</html>

这是弹出窗口的源代码test-popup.html：

<html>
<head>
<title>Test popup</title>
<script type="text/javascript">
function onButtonClick()
{   
  var syntheticEvent = document.createEvent("Events");
  syntheticEvent.initEvent("dataavailable", true, false);
  syntheticEvent.eventType = "test-popup.html finished";
  window.opener.dispatchEvent(syntheticEvent);

  alert("Dispatched dataavailable event, " + 
          "syntheticEvent.timeStamp '" + syntheticEvent.timeStamp + 
            "', syntheticEvent.eventType '" + syntheticEvent.eventType + "'"");
}   
</script>
</head>  

<body>
<input type="button" value="Create dataavailable event" onclick="onButtonClick()" />
</body>
</html>

test-parent.html和test-popup.html都会发出警报消息。两个警报消息中的时间戳都是一致的，所以我很确定弹出窗口创建的事件是由父节点接收的。弹出窗口显示syntheticEvent.eventType的正确值，但父级中的event.eventType未定义。

我在网上找到的示例意味着可以通过将数据放入dataavailable事件来交换数据。 我做错了什么？

提前感谢您的回复。

Answer 1

请将<{>> test-parent.html 中的event.eventType更改为event.type ...

function onDataAvailableEvent(event)
{   
  alert("In onDataAvailableEvent(), " +
          "event.timeStamp '" + event.timeStamp + 
            "', event.eventType '" + event.type + "'");
}

然后，您将在警报中获得正确的事件类型dataavailable

dataavailable事件如何在Javascript中将数据从弹出窗口发送到父窗口？

1 个答案: