The problem scenario

Often we have a requirement to make to route continue in the main window after route has finished its steps in the popup window. For example consider the following scenario.

1. User clicks a link on the page.
2. A popup window opens.
3. Route starts to run in the popup window.
4. After doing several route steps, user closes the popup window.
5. The flow of route will break here since AppNavi won't be able to know when the popup window was closed.

The workaround

We have a workaround that can potentially mitigate the above issue. You can use custom code to detect the closure of the popup window and call the playStep API of the main window. Here are the steps:

1. Detect when the popup window closes. You can use either the button click event that closes the window or the beforeunload event of the window.
2. Get a reference to the appnaviApi object of the main window. You can use window.opener.appnaviApi.
3. Call the playStep method on window.opener.appnaviApi and provide it with the next step ID that should run in the main window.

Sample code

Here is an example of custom code that can be added in the BeforeRender customCode of the step thats the last step done in the popup window.

// Attach beforeunload handler
window.addEventListener('beforeunload', e => {
const opener = window.opener;

// Double check if we got a reference to appnavi object of main window
if (opener && opener.appnaviApi) {

var configuration = { stepId: "1267297d"};

// Continue the route in main window
opener.appnaviApi.route.playStep(configuration);
}
});