Can I use the browser back button for something else?

Question

I'm building a website with a responsive design. On mobile devices, many sections of the page are hidden in "drawers", which can be revealed with a button.

Because of the close resemblance to native phone apps, I have noticed that some users use their device's back button to close the drawers, but the back button instructs the browser to go back to the previous page.

Is there a way to intercept this? Preferably on mobile devices only, as I have no intend on changing the browser's back button behavior across the board.

I'm thinking something like:

// call this code when back button was pressed
if( $( '.drawer' ).hasClass( 'open' ) ) {
    // prevent browser going back a page
    $( '.drawer' ).removeClass( 'open' );
} else {
    // keep normal browser behavior
}

Can it be done?

Yes, the way SPA frameworks do this is by changing the `location.hash` when ever an action takes place, and watching for a change of `location.hash` for the purpose of changing the view. — Jamiec, Jul 07 '15 at 15:29
generally you don't want to alter default functionality in browsers. It's unreliable and bound to get messy. Is it possible to alternatively add anchor links instead? Then when a user clicks a link with an anchor, it can change the hash without navigating away from the page. You can listen for the click event for the drawers and the hashchange event for the back button. — Joseph Marikle, Jul 07 '15 at 15:29

score 1 · Accepted Answer · edited May 23 '17 at 12:02

Per your request, here is my solution as an answer, although I am not certain it will solve your particular issue.

My suggestion is to use the native location.hash and the hashchange event listener to open and close elements allowing for the back button to do the same. This uses default functionality and prevents the need to reload the page every time a drawer is opened.

My demo below is mostly formatting and styles. The important part is the javascript event listener. It seems to work using stackoverflow's snippet editor, but just in case: http://jsfiddle.net/jmarikle/jf1aqtdu/

window.addEventListener('hashchange', function(){
    var old;
    if (old = document.querySelector('section.active')) {
        old.classList.remove('active');
    }
    if (old = document.querySelector('nav a.active')) {
        old.classList.remove('active');
    }
    
    if(location.hash !== '') {
        var activeDrawer = document.querySelector(location.hash.replace(/open-/, '')),
            activeNavLink = document.querySelector('[href="'+location.hash+'"]');
        activeDrawer.classList.add('active');
        activeNavLink.classList.add('active');
    }
});

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #c55;
    color: white;
}

nav ul li {
    display: inline;
}

nav ul li a {
    display: inline-block;
    padding: 1em;
    color: inherit;
    text-decoration: none;
}

nav ul li a:hover,
nav ul li a.active {
    background: #A33;
}

section {
    padding: 1em;
    border-top: 1px solid #888;
    border-bottom: 1px solid #000;
    background: #555;
    color: white;
    display: none;
}
section.active {
    display:block;
}
}

<nav>
    <ul>
        <li><a href="#open-about">About</a></li>
        <li><a href="#open-contact">Contact</a></li>
        <li><a href="#open-test">Test</a></li>
    </ul>
</nav>
<section id="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
<section id="contact">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</section>
<section id="test">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>

Your answer pushed me into the right direction to get this working on my site. I didn't use your answer as-is, but learned my lessons and implemented it in my own way. Still accepted as best answer. Thanks. — Marc Dingena, Jul 08 '15 at 14:42

score 0 · Answer 2 · edited May 23 '17 at 12:34

0

You can handle back button multiple ways. There are some related questions.

handling back button in android from jquery

jQuery Mobile and Android device back button with build.phonegap.com

jquery mobile, use android hardware back button to close a panel

edited May 23 '17 at 12:34

Community

1
1

answered Jul 07 '15 at 15:33

dagi12

449
1
5
20

Can I use the browser back button for something else?

2 Answers2