1

I've a simple web-application, which consists of 3 simple pages

  • a.html
  • b.html
  • c.html
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <a href="b.html">b.html</a>    
    </body>
</html>

<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
            <a href="a.html">a.html</a>    
            <br />
            <a href="c.html">c.html</a>  
    </body>
</html>

<!-- c.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
            <a href="b.html">b.html</a>
    </body>
</html>

As can be seen from the above code, a.html has a link to b.html, b.html has a link to both a.html & c.html and finally, c.html has a link to b.html.

All of the pages will be hosted on the same domain, and I want a very simple thing. All I want is to execute a callback whenever browser's back/forward button is pressed (specifically before navigating to the new page), and in the callback I want the page to which we'll be navigating. And I don't want to update the browser's history while achieving the above (I don't want to ruin the user's experience, updating browser-history will result in unexpected navigation for the user)

The solutions that I tried:

  • performance.navigation.type performance.navigation.type == 2 can be used, but it doesn't distinguishes between back and forward button. So it's not of much use for me. Is there any way to distinguish the back and forward button press here?
  • I don't want to distort this.window.history so that I can get a callback on onpopstate (refer this). Distorting the windows history means ruining the user-experience. Can this be done without distorting the windows history?
  • I know that using window.history object, I can't find the URL to which the forward/back button will navigate to. (This is because of security). But provided that all of my pages are on the same domain, can I somehow get the url to which fwd/back button will be taking me to. I'm mostly concerned about b.html. While I'm on b.html the forward/back button can take me to either a.html or c.html, how do I detect this before actual navigation happens, so that I can get a callback at this point and execute it.
  • I tried using JQuery-Mobile but was stuck and posted it as a separate question. Though I'm not sure how JQuery Mobile achieves it and if it will distort the browser's history.
  • I tried using React-routers, but they are more suited for a single-page-application, and so not much help from there also. Can this be done using any react-concepts?
Lavish Kothari
  • 2,211
  • 21
  • 29
  • 1
    `I want to execute a callback whenever browser's back/forward button is pressed` All you can do is run code in `beforeunload` but there's no way to know what caused that event to fire; the user may have typed in a new web address, or closed their browser. If there's a specific reason you want to know if the forward/back button was pressed you will need to re-engineer the page to work around this limitation. – Rory McCrossan Aug 06 '19 at 09:55
  • 1
    Being able to hook into back/forward and know where it's going to go sounds like a **huge** security hole. – freedomn-m Aug 06 '19 at 09:58
  • @RoryMcCrossan Thanks for the suggestion of `beforeunload`, but as you already told, it's not really of much use to me. Can you please explain what do you mean by "re-engineer the page to work around this limitation"? – Lavish Kothari Aug 06 '19 at 09:59
  • 1
    The best way I could think of would be to change to use a Single Page Application. Then you can control exactly what content is shown and know which way the user is travelling through the page flow. – Rory McCrossan Aug 06 '19 at 10:00
  • @RoryMcCrossan fair-enough. But I'm afraid that this re-engineering will cost me a lot of effort, as the code that's written is already huge. Anyways thanks for the suggestion. – Lavish Kothari Aug 06 '19 at 10:02
  • @freedomn-m so do you mean that there is no way to do this? Should I stop investing my time finding a solution for this and revamp my application to be a single-page application as suggested by Rory? – Lavish Kothari Aug 06 '19 at 10:03
  • 1
    It may be a lot of effort, but you don't really have much of an alternative. – Rory McCrossan Aug 06 '19 at 10:04
  • I see you've already identified this as a security hole. Well done for the research effort before asking. But you've essentially said: "I know I can't get url ... but can I get the url?". – freedomn-m Aug 06 '19 at 10:18
  • I'm not sure you can even distinguish between back/forward before the action has occurred. – freedomn-m Aug 06 '19 at 10:19
  • I would suggest reconsidering the need. Seems to be fairly unique (otherwise there'd be a lot more questions about this) and I'm sure you've got a valid reason for this – freedomn-m Aug 06 '19 at 10:22

0 Answers0