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

Question

我有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>

我希望只得到该结果（4）[“ eeeeee”，“ rrrrrrrrrr”，“ tttttttt”，“ yyyyyy”]

Answer 1

如果我对您的了解很好，则希望发送数据。

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