Get data from message on window.onmessage

Question

I have html frame which i need to pass data on message code it is already passed my all data in text box but as one block when i want to get each text box value sperately

I have make an array and pushed the data into that array but my problem that array is repeated for example if i have four text boxes then the result will look like this one while i need only the last array

 (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>

I expect to get only that result (4) ["eeeeee", "rrrrrrrrrr", "tttttttt", "yyyyyy"]

Answer 1

If I understand you well you want do this to send the data.

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

And you try to read the send data with this

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

And you wonder why you see this in the console?

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

Well it is because you write the complete array to the console each time you receive a message. What you could do is wait till you have 4 messages and than write it to the console like this.

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);
    }
};

Or what is probably better to just send all the data together in one message for example as an object.

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