function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
aam1raam1r 

postMessage and Event Listener for iframe in visualforce page

Hi everyone,

I hope you are able to help me out here.  I currently have a Visualforce page with an iframe that displays a third-party form.  Upon completion of this form i get a success message within the iframe and a button that say Finish.  The Finish button is programmed to redirect to a URL (a visualfofrce page) stored on a field on a record.  However, this redirect does not happen.

I've been told that using PostMessage, along with an event listener to trap events will help me resolve this but i'm unable to figure out how to code this.

My Visualforce page outputPanel is as follows:
<apex:outputPanel layout="block" id="aContainer" style="width: 500px; height: 1000px; margin: 0 auto;">
          <apex:outputtext escape="false" value="{!APayForm}"></apex:outputtext>
          <apex:iframe width="100%" height="1000px" src="" scrolling="true" id="paymentFrame" frameborder="false"/>
          <script>
                    document.getElementById('APayForm').submit();
          </script>
</apex:outputPanel>
The APayForm is built dynamically usinga controller and teh following is an example of what is returned and used in teh outputPanel value above;
// example: <form target="paymentFrame" action="https://test.protected.net/PMWeb1?pRef=1837&amp;pid=a233N0000008SgR" method="post" id="APayForm" >
The Cancel button on teh form returns and event 'a--cancel' and the finish button retruns and event 'a--exit'.  how can use these events to redirct to the same visualforce page called 'PostPayment', which renders a message according to the status of a parent record.  The PostPayment page renders correctly but i'm unable to redirect to it.

Can someone help me figure out the code required for the postMessage and event listener (also where this is to be coded) please?
 
Best Answer chosen by aam1r
aam1raam1r
Ok, i figured it out.  Firstly i found that the pay form is already posting a postMessage.  So all i did was create a listener, coded at teh start of the visualforce (parent) page:
 
<script type="text/javascript">
      // Listen to message from iframe
      bindEvent(window, 'message', function (e) {
         console.log('parent received the message:  ',e.data);
         var cancelURL = '{!cancelPaymentPage}'; 
         var successURL = "{!redirectURL}";
            
         if (e.data == 'a--cancel'){
             window.location.href=cancelURL;
         } else if (e.data == 'a--exit'){
             window.location.href=successURL;
         }
     });
</script>
And it works.  

All Answers

aam1raam1r
Just to clarify - the redirect URL does work independantly, just not via the iframe form.
aam1raam1r
Ok, i figured it out.  Firstly i found that the pay form is already posting a postMessage.  So all i did was create a listener, coded at teh start of the visualforce (parent) page:
 
<script type="text/javascript">
      // Listen to message from iframe
      bindEvent(window, 'message', function (e) {
         console.log('parent received the message:  ',e.data);
         var cancelURL = '{!cancelPaymentPage}'; 
         var successURL = "{!redirectURL}";
            
         if (e.data == 'a--cancel'){
             window.location.href=cancelURL;
         } else if (e.data == 'a--exit'){
             window.location.href=successURL;
         }
     });
</script>
And it works.  
This was selected as the best answer