javascript - Listen to window.onmessage in React Component - Stack Overflow

admin管理员组

文章数量:1347408

I'm trying to listen for a postmessage in my react class. It isn't working.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleMessage = this.handleMessage.bind(this);
  }
  ponentDidMount(){
    window.addEventListener("onmessage", this.handleMessage);
  }
  ponentWillUnmount() {
    window.removeEventListener('onmessage', this.handleMessage);
  }
  handleMessage(e){
    console.log('me?')
  }
}

I send the message like this:

window.opener.postMessage('a message', '*');

I know the message is getting to the window, because I can successfully listen to it in the plain JS file that loads the react app. However listening for it in react as above does not work.

Why isn't my listener every being triggered, how can I debug it?

I'm trying to listen for a postmessage in my react class. It isn't working.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleMessage = this.handleMessage.bind(this);
  }
  ponentDidMount(){
    window.addEventListener("onmessage", this.handleMessage);
  }
  ponentWillUnmount() {
    window.removeEventListener('onmessage', this.handleMessage);
  }
  handleMessage(e){
    console.log('me?')
  }
}

I send the message like this:

window.opener.postMessage('a message', '*');

I know the message is getting to the window, because I can successfully listen to it in the plain JS file that loads the react app. However listening for it in react as above does not work.

Why isn't my listener every being triggered, how can I debug it?

• javascript
• reactjs

Share Improve this question Follow asked May 21, 2021 at 16:16 WillWill 4,74433 gold badges4040 silver badges7070 bronze badges 2

• Make sure that when you send the message the App ponent is mounted – lissettdm Commented May 21, 2021 at 16:19
• Also the addEventListener should be message not onmessage – lissettdm Commented May 21, 2021 at 16:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

The event's name should be message and not onmessage:

 window.addEventListener("message", this.handleMessage);

See: The dispatched event

本文标签： javascriptListen to windowonmessage in React ComponentStack Overflow