Using IFrame In React - With HTTP HTTP Request

I have a requirement to open the system widget appearance in an iFrame on my component. I am using React for UI Code. The external system gave me a POST request with a form-data payload that I need to submit, and then I get a 302 (Moved Temporarily) status code in the response, and in the Response Header field I get the URL for the IDC iFrame. The problem is that it gets called automatically after the POST call, so when I assign it to the props components and call it from the iFrame src, it is a re-call and I am trying to avoid it. In the simulator I got from external system (jsp simulator) they did this by filling in the form attributes with the action and the target iFrame -

    <form  id="data_form" action="SubmitInit.jsp" target="payment_frame" method="post">

      

In my case, I call the action in:

componentWillMount() {

        this.setIFrameContext();
    }

setIFrameContext() {
    const {customerId} = this.props;
    const parentDomain = 'http://localhost:8091';
    const reqData = {customerId, parentDomain};
  this.props.dispatch(this.paymentActions.loadAddInstrumentScreen(reqData));
}

      

and -

render() {
    const {responseURL} = this.props;
    return (
        <div>
            <iframe
                name="payment_frame"
                id="payment_frame"
                src={responseURL} />
            <br />

        </div>
    );
}

      

I tried using srcDoc with the response I get from the automatic invocation, but it didn't work. Any idea how I can display the POST response directly to the iFrame?

+3


source to share


1 answer


try this library, it has PostIframe component.



https://github.com/jisaacks/react-post

0


source







All Articles