Chrome Back button issue after interaction with Iframe Angular

Question

I have an Angular application. Below are the steps to follow:

1. A customer goes through a flow and lands into one of the partial pages.

2. From one of the partial page, I click a button to get an ID from a cross domain (done via service call, thus no CORS issue).

3. Using this ID, I append on the cross domain url -- something like http://externalpahe.com?responseId=ID

4. This url is executed a child component, inside an Iframe.

5. In this Iframe cross domain's page, there are two button - 'Save' and 'Cancel'

6. On Click of any of these buttons, the application is navigated back.

7. ISSUE: After successful back navigation, on click of Chrome browser's back button, the application reloads.

Due to this, the flow of the application restarts again and the customer is required to go through the flow again. Though the data gets updated, on arriving back to the partial page, where the action has been performed previously, but it is not a good ease-of-use scenario.

I am making use of the below code to execute the cross domain's url in an iframe. I doubt that the DomSanitizer is causing the weird issue for Chrome. For others browsers', it works fine.

Angular Component:

constructor(private sanitizer: DomSanitizer) { }

ngOnInit() {
    this.targetUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.sourceUrl);
}

Angular Template:

<iframe #crossDomainIframe [src]="targetUrl" (load)="onPageLoad()">
</iframe>

In onPageLoad() I am doing simple business logic of emitting the response back to the parent component.

onPageLoad () {
    this.callbackResponse.emit(returnUrl);
}

Is there a way to handle the issue?

Or can the cross domain be executed on Iframe in a different way?

Answer 1

Long story short, back button presses in this kind of scenario are a ongoing problem with the web in general. Nevertheless, a couple ideas. Idea one: use the onbeforeunload event in the window:

window.addEventListener('beforeunload', function(e){
    e.preventDefault();
    e.returnValue = 'Hitting the back button will make you start over!';
    return e.returnValue;
});

Not all browsers will display the correct dialog text, but setting the returnValue will cause all browsers to prompt the user before actually forcing everything to reload, which is better than nothing. Unfortunately, it will also do that on close/refresh window, though you can remove the listener once you're done.

Idea two: set a hash.

var ignoreNextHashChange;
window.onhashchange = function(){
  if (ignoreNextHashChange)
    ignoreNextHashChange = false;
  else
    alert('Whoa there--using the back button will break the process!');
}

Then at every stage of you code do something like:

ignoreNextHashChange = true;
window.location.hash = '#hashForThisStage';

Again, not 100% perfect, but it will make the back button roll back hashes and fire a detectable event rather than breaking your entire flow.

Cheers!