Jump to content

Browsers back button


Recommended Posts

  • Moderators
- the browsers back-button in Smart Mobile Studio

 

Most users find it frustrating they cannot use their browsers back/next buttons to navigate between forms. And especially so since they will typically leave the application altogether if they use them.

 

One solution to this problem is manipulating the browsers history stack. Basically if we insert entries in the browsers history whenever there is a form change, and have a notification happening when the user uses the back/next buttons, then we can hook any history changes to form changes.

 


 

First thing to do is to hook up the popstate event. A popstate event is dispatched to the window every time the active history entry changes.

 

  w3_bind2(BrowserAPI.Body, 'onpopstate', CBOnPopState);

  w3_bind2(BrowserAPI.Body, 'popstate', CBOnPopState);  

 

Next is to inject fake url's in the browsers history whenever there is a form change. The pushState method accepts a state object, a description and a url. The first 2 parameters are not really important here, the last one is. The following code injects a <your domain>/2.html entry in the history stack whenever the user navigates to Form2.

 

  asm

    var str = '{"hello":"world"}';

    var stateObj = JSON.parse(str);

    history.pushState(stateObj, "page 2", "2.html");

  end;

  Application.GotoForm('Form2');

 

and then in the CBOnPopState procedure the history entries are synchronised with the application forms

 

  Procedure CBOnPopState;

  var

    F : String;

  Begin

    F := 'Form1';

    asm

      if (window.location.href == '<your domain>/') {@F = 'Form1';};

      if (window.location.href == '<your domain>/1.html') {@F = 'Form1';};

      if (window.location.href == '<your domain>/2.html') {@F = 'Form2';};

      if (window.location.href == '<your domain>/3.html') {@F = 'Form3';};

    end;

    Application.GoToForm(F);

  end;

 

So now the browsers back/next buttons navigate between Forms !!

Works in all modern browsers, desktop and mobile.

 

There is a history.js project on github if you need Html4 browser support

 

Nico

 

Link to post
Share on other sites
  • 3 months later...

Hi

 

I am having problem exiting a browser-based Windows Phone app normally when it has browser history.

 

How can the code above be modified to clear the web navigation history with each event on the page, so that the back-button log is always empty?

 

I have tried using the BrowserAPI.Body handle but still unable to make it work.

Link to post
Share on other sites
  • Moderators

Check out https://developer.mozilla.org/en-US/docs/Web/API/Window/history :


For security reasons the History object doesn't allow the non-privileged code to access the URLs of other pages in the session history, but it does allow it to navigate the session history.


There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...