IFrame Back button

Question

I searched a lot to get rid of this problem on the internet but could not find a specific solution despite the problem being discussed in details previously.

The query is simple. My javascript dynamically adds an Iframe to the web page (which displays a feedback form). The problem is that, "after answering", now when the user clicks the back-button of the browser the iframe instead of the browser window is affected i.e. the questionnaire is displayed again. I want the browser back button to behave normally.

This behavior is really annoying and I am having real trouble fixing this.

I am using firefox.

Looking forward to the replies. Please inform me if I should give more details.

Thanks,

Answer 1

Your form has a submit button, which posts the page to the server. The back button will always send the user back to the form regardless of whether you use a iframe or not. The ideal way is to notify the user of a completed action, in this case thank the user for the feedback (using an alert box) and redirect the user to the home page or provide a button in the page saying "Back to Home".

Answer 2

Firefox and IE indeed act like you mentioned, but Chrome do not, and I'd guess other WebKit browsers would do the same. In Chrome, clicking the Back button will land you where you want to go (the previous URL of the parent frame). i.e. Chrome to not add iframe URL changes in the back button history.

Sadly, I've found no way to force IE and FF to replicate this, so I used the AJAX post approach suggested above by Arun.

Here's my iframe source, which use jQuery to post the form, and replace the whole page with the result of that POST:

<form method="post" onsubmit="postForm(this);return false">
  ...
</form>

<script type="text/javascript">
function postForm(form) {
    $.post(form.action, $(form).serialize(), postCompleted);
}
function postCompleted(data) {
    $('html').html(data);
}
</script>

This works in all browsers; clicking the Back button will send you back to the previous URL a seen by the end user, instead of the initial form loaded dynamically in the iframe.