'{isTrusted: true} is received as event in callback when listening to a postMessage from an iframe

I have gone through all similar questions in here and none worked for me. I have a WebView in my React Native application like:

          <WebView
            ...
            originWhitelist={["*"]} 
            source={{
              html: htmlStr,
            }}
            ...
          />

Here is the html code in which I want to post a message to the top window from an iframe:

const htmlStr = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      
    </head>
    <body>
    <main>
      <div id="htmlForm"></div>
    </main>
  
    <script>
  
      window.addEventListener('message', onCallback);
      showHtmlDataInIframe();

      function onCallback(event){
        window.ReactNativeWebView.postMessage(JSON.stringify({message: "in onCallback", event: event}));            
      }
  
      function showHtmlDataInIframe() {
        const auth = document.getElementById('htmlForm');
        const frame = document.createElement('iframe');
        frame.srcdoc = "<html><body>Hello, <b>world</b>.<scri" + "pt> window.top.postMessage('A Message');</scr" + "ipt></body></html>";
        auth.parentNode.appendChild(frame);
      }
    </script>
    </body>
    </html>`;
};

The problem is the onCallback is receiving event: {isTrusted: true} rather than the actual message.

Any help is much appreciated.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'{isTrusted: true} is received as event in callback when listening to a postMessage from an iframe

Sources

Related Questions