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",);

Answer 2

谢谢大家！最后，我有一个朋友帮了我忙。

方法如下：

Java Script:

      function broadcast() {
    	var amountBox = document.querySelector("#amount");
    	var message = {"position": 1, "balance": parseFloat(amountBox.value)};
    	for (var i = 0; i < childWindows.length; i++) {
    		childWindows[i].postMessage(message, "*");
    	}
    }

AND in second window

function onMessage(e) {
	if (e.origin !== 'parentwindow.html'){
		document.getElementById('balance' + e.data.position).innerHTML = e.data.balance;
	}
}

window.addEventListener('message', onMessage, true);

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

2 个答案: