JavaScript Post Message Cross Domain - 将数据从不同的函数发送到不同的输出字段

Question

我目前正在使用 JavaScript 和 HTML 为文化机构开发一个小工具。但由于我是 Java 初学者，我陷入了这个问题:

我有两个 HTML 文档，它们通过跨域消息传递进行通信。这个想法是，一个文档是后端，一个文档是前端。应该做的是在后端的不同文本字段中填写数字(1 - 5)并将它们发送到前端的匹配字段。前端有时会成为第二个屏幕上的一个窗口。

到目前为止，我已经设置了所有内容，通信基本上可以工作，但我只是无法让按钮 1 仅将值发送到结果字段 1，按钮 2 发送到结果字段 2 等等...

发送函数是postMessage()，接收函数是onMessage()。

如何定义消息来自父窗口中的哪个函数并使其显示在子窗口中的匹配位置？

这是我的代码。我有 5 个不同的输入字段，其中插入的数字应传输到子窗口的 5 个不同的输出字段。

var childWindowUrl = "secondwindow.html";

	function newWindow() {
		
		var win = window.open(childWindowUrl, '_blank', 'toolbar=0,location=0,menubar=0');
		childWindows.push(win);
	}

	function broadcast() {
	var amountBox = document.querySelector("#amount");
	balance = parseFloat(amountBox.value);
	for (var i = 0; i < childWindows.length; i++) {
	childWindows[i].postMessage(balance, "*");
	}
  
  // Input field
  
  <input type="text" id ="amount" />
  
  // HTML Buttons
  
  <button onclick="broadcast()">Send balance</button>
  <button onclick="newWindow()">New Window</button>
  
  // Child Window Code
 
 function onMessage(e) {
if (e.origin !== 'parentwindow.html') {
	document.getElementById('balance').innerHTML = e.data;
	}
	}

window.addEventListener('message', onMessage, true);

Answer 1

当您使用postMessage时，默认情况下不提供有关源函数的信息。也没有提供有关目的地的信息(除了 targetOrigin 之外)。

您需要自己对信息进行编码。

例如

targetWindow.postMessage({ button: 1, says: "Hello, world" }, "http://example.com",);