从 iframe 向父文档发送消息答案

【问题标题】：send message from iframe to a parent document从 iframe 向父文档发送消息
【发布时间】：2020-02-08 18:40:18
【问题描述】：

我想在iframe中写一条消息，然后通过submit按钮将其反转并发送到父窗口，我有反转功能但我不知道如何使用window.parent.postMessage这份工作。

reverse_service.html (iframe-child)

<!DOCTYPE html>
<html>

<body>


<input type="text" id="myInput" >
<button onclick="reverseString()">submit</button>

  <script>

  function reverseString() {
   var str = document.getElementById("myInput").value;
    var splitString = str.split(""); 
    var reverseArray = splitString.reverse();
     var joinArray = reverseArray.join(""); 
    return joinArray;}

   window.parent.postMessage(reverseString(), "*" )

  </script>

</body>
</html>

父.html

<!DOCTYPE html>
<html>
<head>
  <title>User Actions</title>
  <meta charset="utf-8">
  <script src="lib/jquery-3.2.1.min.js"></script>
  <script>
  /* global $ */
  $(document).ready(function() {
    'use strict';
    $(window).on('message', function(evt) {
      //Note that messages from all origins are accepted

      //Get data from sent message
      var data = evt.originalEvent.data;
      //Create a new list item based on the data
      var newItem = '\n\t<li>' + (data.payload || '') + '</li>';
      //Add the item to the beginning of the actions list
      $('#actions').prepend(newItem);
    });
  });
  </script>
</head>

<body>
  <iframe id="encoder_iframe" src="reverser_service.html"></iframe>
  <ul id="actions">
  </ul>
</body>
</html>

【问题讨论】：

stackoverflow.com/questions/8822907/…检查这个类似的问题已经回答了

标签： javascript iframe parent-child

【解决方案1】：

将窗口发布消息函数移动到类似这样的reverseString中。

父.html

<!DOCTYPE html>
<html>
<head>
  <title>User Actions</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
  /* global $ */
  $(document).ready(function() {
    'use strict';
    $(window).on('message', function(evt) {

      //Note that messages from all origins are accepted

      //Get data from sent message
      var data = evt.originalEvent.data;

      //Create a new list item based on the data
      var newItem = '\n\t<li>' + (data || '') + '</li>';
      //Add the item to the beginning of the actions list
      console.log(newItem)
      $('#actions').append(newItem);
    });
  });
  </script>
</head>

<body>
    <iframe id="serviceFrameSend" src="./reverse_service.html" width="500" height="200"  frameborder="0" ></iframe>
     <ul id="actions"></ul>
</body>
</html>

reverser_service.html：

<!DOCTYPE html>
<html>

<body>


<input type="text" id="myInput" >
<button onclick="reverseString()">submit</button>

  <script>

  function reverseString() {
   var str = document.getElementById("myInput").value;
    var splitString = str.split("");
    var reverseArray = splitString.reverse();
     var joinArray = reverseArray.join("");
     window.parent.postMessage(joinArray, "*" )
   }
  </script>

</body>
</html>

【讨论】：

谢谢，但它没有用，它只是一直给我一个点，还有一个问题，你为什么要更改父级中的scr，我认为我的问题是scr，它不允许我的iframe 向父窗口发送任何消息。
请在没有 ./ 的情况下进行检查，例如 src="reverser_service.html"。我已经在我的本地系统中测试过它工作正常

【解决方案2】：

您的reverser_service.html 有效。您需要在main.html 上将data.payload 替换为data：

var newItem = '\n\t<li>' + (data || '') + '</li>';

但我们假设您只能编辑 reverser_service.html 文件。

使用window.postMessage() 方法可以在Window 对象之间创建通信。在这种情况下，当目标是 window.parent 时，您会将数据从子帧（<iframe>、<object>、<frame>）传输到父帧。

postMessage(message, [transfer]) 有一个 message 参数来传递数据。它可以是任何值或 JavaScript 对象。

在parent.html 文件中，您可以看到它如何尝试从data.payload 获取字符串。如果找不到，它将是 undefined 并且在<li> 标记之间不添加任何内容（“”）。因此，尝试创建一个具有属性“payload”的对象，该对象存储joinArray，并以window.parent 返回此对象：

<!DOCTYPE html>
<html>
<body>

  <input type="text" id="myInput" >
  <button onclick="reverseString()">submit</button>

  <script>
    function reverseString() {
      var str = document.getElementById("myInput").value;
      var splitString = str.split("");
      var reverseArray = splitString.reverse();
      var joinArray = reverseArray.join("");

      const payload = {"payload":joinArray};

      window.parent.postMessage(payload, "*" )
    }
  </script>

</body>
</html>

main.html 当你提交不同的字符串时：

!skrow tI :-)

3# rebmun tseT

2# rebmun tseT

1# rebmun tseT

【讨论】：