Question

104

ReactJs with Iframe events and changes handling

rated 0 times [ 105] [ 1] / answers: 1 / hits: 20914 / 6 Years ago, tue, january 16, 2018, 12:00:00

I have ReactJs Component which includes an iframe. That iframe is used to do some job and after it finishes it has callback to Success or Error pages.
In my chrome browser, network tab I can see the requests and responses.
I want to be able to handle those callbacks in frontend somehow, did any of you met this type of problem?

My project is MVC and I do not have Success and Error actions in my controllers, it is an single page application with React.

UPDATE
my whole iframe looks like this

This iframe is third-party integrations which does a callback on success and error to static URL: host/controller/success and host/controller/error

My mission is to catch when this happens in React, I hope this is possible somehow, I was trying to listen to 'message' event, but might be that I am doing anything incorrect.

Any suggestions are appreciated

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daja

Add To Favorites

Follow

Total Points: 407

Total Questions: 103

Total Answers: 103

Location: Ghana

Member since Sun, Mar 27, 2022

2 Years ago

answered 6 Years ago stefanicarolinat · Accepted Answer

If you own the frame content you should use window postmessage to send content back to your page. https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

If you are using MVC you can potentially add the postmessage listeners to your controller and send them to reply back to the view.

Update

I've created a sample of what I was talking about.

index.html

<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

  <meta name=viewport content=width=device-width, initial-scale=1.0>

  <meta http-equiv=X-UA-Compatible content=ie=edge>

  <title>Document</title>

  <script src=https://unpkg.com/react@16/umd/react.development.js></script>

  <script src=https://unpkg.com/react-dom@16/umd/react-dom.development.js></script>

  <script src=https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js></script>

</head>

<body>

  <div id=app></div>

  <script src=./main.js type=text/babel></script>

</body>

</html>

iframe.html

<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

  <meta name=viewport content=width=device-width, initial-scale=1.0>

  <meta http-equiv=X-UA-Compatible content=ie=edge>

  <title>Document</title>

</head>

<body>

  <script>

    window.top.postMessage(

      JSON.stringify({

        error: false,

        message: 'Here we go'

      }),

      '*'

    );

  </script>

</body>

</html>

main.js

// React controller used to load the iframe

class Loading extends React.Component {

  render() {

    return (

      <div>

        Waiting on iframe

        <iframe src={this.props.iframeUrl}></iframe>

      </div>

    );

  }

}



// React controller used after iframe postmessage

class Complete extends React.Component {

  render() {

    return (

      <div>

        iFrame postmessage got me here

      </div>

    );

  }

}



// Sample of controller

class Controller {

  constructor() {

    this.loading = true;

    this.onMessageReceived = this.onMessageReceived.bind(this);

    this.bindEvents();

    this.render();

  }



  bindEvents() {

    window.addEventListener(message, this.onMessageReceived, false);

  }



  onMessageReceived(event) {

    var data = JSON.parse(event.data);

    console.log(data);

    this.loading = false;

    this.render()

  }



  render() {

    if (this.loading){

      ReactDOM.render(

        <Loading iframeUrl=./iframe.html />,

        document.getElementById('app')

      );

    } else {

      ReactDOM.render(

        <Complete />,

        document.getElementById('app')

      );

    }

  }

}



// Run the controller

new Controller();