CODEWITHSUNDEEP
javascriptpostmessage
user445338
user445338

Reputation:

iFrame window.postMessage - data is always an empty string

I am trying to post a message to an iFrame within my angular application. The message makes it to the iFrame; however, the data passed is always received as an empty string in the iFrame.

Any ideas why this could be?

Note: both of the applications are running locally.

In my angular application:

html:

<iframe id="authIFrame" src="http://127.0.0.1:9000"></iframe>

ts:

const wn = document.getElementById('authIFrame').contentWindow;
wn.postMessage({authToken: 'abcdefg'},  '*');

In the iFrame:

if (window.addEventListener) {
    window.addEventListener('message', handleMessage, false);
  } else if (window.attachEvent) {
    window.attachEvent('onmessage', handleMessage());
  }

  function handleMessage(event) {
 //HERE>>>>  event.data is always "" (empty string)
    const {data, origin, source} = event;

    if (isOriginAllowed(origin)) {

      const {method, accessToken, idToken, userData} = data;

      if (method === 'SET') {
        return setIdentityData(accessToken, idToken, userData);
      } else if (method === 'GET') {
        return getIdentityData();
      }
    }
  }

I also tried stringifying the data passed to the iFrame. It didn't help.

My only guess is that maybe the browser is refusing the send the data since my app is not running over https...

Upvotes: 9

Views: 1632

Answers (1)

Balaji
Balaji

Reputation: 10877

Your data always empty before load iframe ,just send data after loaded your iframe

authIFrame.addEventListener('load',()=>{
    //your code paste  here
})

Upvotes: 0

Related Questions