Javascript 从window.onmessage上的消息获取数据

我有一个html框架，我需要在消息代码上传递数据，它已经在文本框中传递了我的所有数据，但当我想快速获取每个文本框的值时，它作为一个块

我已经创建了一个数组，并将数据推送到该数组中，但我的问题是，该数组被重复。例如，如果我有四个文本框，那么结果将与此类似，而我只需要最后一个数组

 (1)["eeeeee"]
(2) ["eeeeee", "rrrrrrrrrr"]
 (3) ["eeeeee", "rrrrrrrrrr", "tttttttt"]
(4) ["eeeeee", "rrrrrrrrrr", "tttttttt", "yyyyyy"]



   <script type="text/javascript">

      // when a message is received from the page code

     // when a message is received from the page code
      var arr = [];
      window.onmessage = (event) => {
          // debugger;
           if (event.data) {
          document.getElementById("theLabel").innerHTML = event.data;
          var receivedData = event.data;

            arr.push(receivedData);
        }
            console.log(arr);
      };

 // send message to the page code

      function button_click() {

          window.parent.postMessage(document.getElementById("theMessage").value,"*");
window.parent.postMessage(document.getElementById("theMessage1").value, "*");
window.parent.postMessage(document.getElementById("theMessage2").value, "*");
window.parent.postMessage(document.getElementById("theMessage3").value, "*");

      }

    </script>

（1）[“eeeeee”]
（2） [“eeeeee”，“rrrrrrrrrrrrrr”]
（3） [“eeeeee”、“rrrrrrrrrrrrrr”、“tttttttt”]
（4） [“eeeeee”、“RRRRRRRR”、“tttttttt”、“YYYYY”]
//当收到来自页面代码的消息时
//当收到来自页面代码的消息时
var-arr=[]；
window.onmessage=（事件）=>{
//调试器；
if（事件数据）{
document.getElementById（“标签”）.innerHTML=event.data；
var receivedData=event.data；
到达推送（接收数据）；
}
控制台日志（arr）；
};
//将消息发送到页面代码
功能按钮\u单击（）{
window.parent.postMessage（document.getElementById（“theMessage”）.value，“*”；
window.parent.postMessage（document.getElementById（“theMessage1”）.value，“*”）；
window.parent.postMessage（document.getElementById（“theMessage2”）.value，“*”）；
window.parent.postMessage（document.getElementById（“theMessage3”）.value，“*”）；
}

我只希望得到那个结果

---

（4） [“eeeeee”、“rrrrrrrrrrr”、“tttttttt”、“yyyyyy”]

如果我理解您的意思，您希望这样做来发送数据

function button_click() {
    window.parent.postMessage(document.getElementById("theMessage").value,"*");
    window.parent.postMessage(document.getElementById("theMessage1").value, "*");
    window.parent.postMessage(document.getElementById("theMessage2").value, "*");
    window.parent.postMessage(document.getElementById("theMessage3").value, "*");
}

你试着用这个来读取发送数据

var arr = [];
window.onmessage = (event) => {
    if (event.data) {
        document.getElementById("theLabel").innerHTML = event.data;
        var receivedData = event.data;
        arr.push(receivedData);
    }
    console.log(arr);
};

你想知道为什么你会在控制台上看到这个

(1)["eeeeee"]
(2) ["eeeeee", "rrrrrrrrrr"]
(3) ["eeeeee", "rrrrrrrrrr", "tttttttt"]
(4) ["eeeeee", "rrrrrrrrrr", "tttttttt", "yyyyyy"]

这是因为每次收到消息时，都会将整个数组写入控制台。你能做的就是等到你有4条消息，然后像这样把它写到控制台上

var arr = [];
window.onmessage = (event) => {
    if (event.data) {
        document.getElementById("theLabel").innerHTML = event.data;
        var receivedData = event.data;
        arr.push(receivedData);
    }
    if(arr.length === 4) {
        console.log(arr);
    }
};

或者最好是将所有数据一起发送到一条消息中，例如作为一个对象

function button_click() {
    var messages = {
        theMessage: document.getElementById("theMessage").value,
        theMessage2: document.getElementById("theMessage").value,
        theMessage3: document.getElementById("theMessage").value,
        theMessage4: document.getElementById("theMessage").value
    }
    window.parent.postMessage(messages,"*");
}

---

如果我很了解你，你想这样做来发送数据

function button_click() {
    window.parent.postMessage(document.getElementById("theMessage").value,"*");
    window.parent.postMessage(document.getElementById("theMessage1").value, "*");
    window.parent.postMessage(document.getElementById("theMessage2").value, "*");
    window.parent.postMessage(document.getElementById("theMessage3").value, "*");
}

你试着用这个来读取发送数据

var arr = [];
window.onmessage = (event) => {
    if (event.data) {
        document.getElementById("theLabel").innerHTML = event.data;
        var receivedData = event.data;
        arr.push(receivedData);
    }
    console.log(arr);
};

你想知道为什么你会在控制台上看到这个

(1)["eeeeee"]
(2) ["eeeeee", "rrrrrrrrrr"]
(3) ["eeeeee", "rrrrrrrrrr", "tttttttt"]
(4) ["eeeeee", "rrrrrrrrrr", "tttttttt", "yyyyyy"]

这是因为每次收到消息时，都会将整个数组写入控制台。你能做的就是等到你有4条消息，然后像这样把它写到控制台上

var arr = [];
window.onmessage = (event) => {
    if (event.data) {
        document.getElementById("theLabel").innerHTML = event.data;
        var receivedData = event.data;
        arr.push(receivedData);
    }
    if(arr.length === 4) {
        console.log(arr);
    }
};

或者最好是将所有数据一起发送到一条消息中，例如作为一个对象

function button_click() {
    var messages = {
        theMessage: document.getElementById("theMessage").value,
        theMessage2: document.getElementById("theMessage").value,
        theMessage3: document.getElementById("theMessage").value,
        theMessage4: document.getElementById("theMessage").value
    }
    window.parent.postMessage(messages,"*");
}

---

您的event.data是什么样子的？这是你在上面描述的吗？我已经编辑了帖子你的event.data是什么样子的？这是你在上面描述的吗？我已经编辑了帖子。你是对的，但我想知道在第一种情况下，如果（arr.length==4）{console.log（arr）；}如果我有4个以上的数字，我应该数一数表单中的所有文本框吗。另一种解决方案是将所有数据作为一条消息发送，而我需要将每个texbox值单独传递到数据库。这就是为什么第二种解决方案在一条消息中发送所有数据更好的原因。@mr.alaa您甚至不需要使用JSON，应该根据规范处理所有类型的数据类型。使用js对象编辑我的答案。是的，你是对的，但我想知道在第一种情况下，如果（arr.length==4）{console.log（arr）；}如果我有4个以上的数字，我应该计算表单中的所有文本框吗。另一种解决方案是将所有数据作为一条消息发送，而我需要将每个texbox值单独传递到数据库。这就是为什么第二种解决方案在一条消息中发送所有数据更好的原因。@mr.alaa您甚至不需要使用JSON，应根据规范处理所有类型的数据类型。使用js对象编辑我的答案。