CODEWITHSUNDEEP
javascripthtmlhttp-redirectiframe
Ayyangar
Ayyangar

Reputation: 11

redirect server side loading inside iframe

I have an iframe. On clicking a particular link inside the iframe, an error validation occurs, server-side and subsequently a redirect occurs from the server side. Now, the redirect causes the page to load inside the iframe. Is there any way to make the redirect occur on the parent page? I know its possible to do it if it was a client side validation. But this is a server side validation and the redirect command occurs from the server. In the redirect, i am also loading an error attribute which appears as an error div. Even this gets loaded inside the iframe. (An iframe inside an iframe with an error div).

Upvotes: 1

Views: 3902

Answers (4)

user2587132
user2587132

Reputation:

say A is your parent page and B is the child page inside the frame.

on server validation failure don't redirect to page A but B or an error page C!

this is more of a hack I suppose, if you are able to do a hashchange

  • redirect to page B with a /#notvalid added at the last in the url when server validation fails
  • listen to the load event of the iframe carrying B in the parent page A and check if the iframe's src has '#notvalid' at the end. if yes, show the error div in the parent page!

Upvotes: 0

Nir Alfasi
Nir Alfasi

Reputation: 53525

You can communicate between the main window and the iframe only if they use the same protocol!

The "right" way to do so is to use postMessage. You can find two usage examples here and here. So long for the right way.

The quick and dirty:
In the following example the outer window has a JS function called change() which is called everytime the iframe is reloaded. You can use it to detect a div that is being displayed only when an error occurs - and then redirect. The example below redirects to ycombinator website. You can view it here

<html>
   <head>
   <script type="text/javascript">
     function change(obj){
       var iframe = document.getElementById('iFrm');
       var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
       var obj = innerDoc.getElementById('completed');
       if(obj !== undefined && obj !== null){
           window.location = "https://news.ycombinator.com/";
       }
     }
     </script>         
        </head>
        <body>
         <div class="keuzeDiv">
                <iframe id="iFrm"  src="https://sandbox.plimus.com/jsp/buynow.jsp?contractId=2138644" onLoad="change();" width="100%" height="100%"></iframe>
                </div>
        </body>
</html>

Upvotes: 0

Guttsy
Guttsy

Reputation: 2119

If you don't want to change your server's output but are looking for a quick and dirty solution, you may be able to do something like this:

See: iFrame src change event detection?

You could check the location of the page you got redirected to (if that matters) and, when the IFRAME has changed locations for the second time (since the first would be when the IFRAME loads initially) you could redirect your main window to the page of interest.

(I guess we could also ask the question: why an IFRAME instead of using an Ajax request to validate input?)

Upvotes: 0

Patrick Moore
Patrick Moore

Reputation: 13344

Here is the code that @mavrosxristoforos is alluding to in the comments. Use in place of PHP's header() or whatever redirect you may be employing.

<script type="text/javascript">
window.parent.location.href= "http://your-redirect-url-here";
</script>

Upvotes: 1

Related Questions