отправить сообщение из iframe в родительский документ - PullRequest
Новая
       20

отправить сообщение из iframe в родительский документ

0 голосов
/ 11 октября 2019

Я хочу написать сообщение в 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>

parent.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>

Ответы [ 2 ]

0 голосов
/ 12 октября 2019

Ваш reverser_service.html работает. Вам нужно заменить data.payload на data на main.html: 

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

Но давайте предположим, что вы можете редактировать только файл reverser_service.html.

в окне Метод .postMessage () позволяет создать связь между объектами Window. В этом случае, когда целью является window.parent, вы будете передавать данные из подкадра (<iframe>, <object>, <frame>) в родительский объект.

postMessage (message, [Transfer]) имеет параметр message, который доставляет данные. Это может быть любое значение или объект JavaScript.

В файле parent.html вы можете увидеть, как он пытается получить строку из data.payload. Если он не может найти ничего, он будет undefined , и он ничего не добавляет ("") между <li> тегами. Итак, попробуйте создать объект со свойством «полезная нагрузка», в котором хранится 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
0 голосов
/ 11 октября 2019

Переместить функцию отправки сообщения в окно в reverseString примерно так:

parent.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...