0

I want to write a message in an iframe, then reverse it by the submit button and send it to the parent window, I have the reverse function but I don't know how to use window.parent.postMessage for this job.

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>
Rashed Hasan
  • 3,721
  • 11
  • 40
  • 82
Sheyda Alizadeh
  • 7
  • 3
  • https://stackoverflow.com/questions/8822907/html5-cross-browser-iframe-postmessage-child-to-parent check this similar question been answered – Khurram Shaikh Oct 11 '19 at 09:08

2 Answers2

0

Move the window post message function into reverseString something like this.

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>
kumaran
  • 366
  • 1
  • 8
  • thanks but it didn't work, it just keeps giving me a dots, and one question why did you change the `scr` in the parent, I think my problem is the `scr`, it doesn't let my `iframe` to send any message to parent window . – Sheyda Alizadeh Oct 11 '19 at 10:08
  • please check without ./ like this src="reverser_service.html". I have tested in my local system it is working fine – kumaran Oct 11 '19 at 10:45
0

Your reverser_service.html works. You need to replace data.payload with data on main.html:

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

But lets assume that you can only edit the reverser_service.html file.

With window.postMessage() method it is possible to create communication between Window objects. In this case when a target is window.parent you will transfer data from subframe (<iframe>, <object>, <frame>) to the parent.

postMessage(message, [transfer]) has a message parameter which delivers the data. It can be any value or JavaScript object.

On parent.html file you can see how it tries to get a string from data.payload. If it can't find any, it will be undefined and it adds nothing ("") between <li> tags. So, try to create an object with property "payload", which stores the joinArray, and return this object with 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 when you submit different strings:

  • !skrow tI :-)
  • 3# rebmun tseT
  • 2# rebmun tseT
  • 1# rebmun tseT
markspl_
  • 26
  • 3