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