Friday, March 29, 2024

Disabling the Back Button

Use these to jump around or read it all…

[Three Methods]
[Method Two: Open and Close]
[Method Three: Frames Trap]

This tutorial is kind of a misnomer. You technically cannot disable the Back button on someone’s browser, however, you can make it so that the button isn’t available or continues to load the same page.

I should say up front that this is an effect that you may not want to use a great deal as it traps your users, however, the effect is used a great deal today and I get tons of email asking how to achieve the effect…so here it is. I simply offer it as code. You do with it as you please.


Three Methods

I know of three methods to somewhat disable a browser’s Back button. Now, please understand that none of these methods are foolproof as the Back function can always be achieved by right clicking on the page and choosing to go back. Furthermore, the user can always get out of the system by leaving the domain altogether or right clicking on the back button and choosing a page two or three back in the browser’s history.

That said, here are the three methods.

The first really doesn’t deserve more than a few lines in that you most likely already know how to do it. Set up a link that opens a new windowthat doesn’t have a back button. You can get that effect by setting the “toolbar” to “no” when you configure the new window.

It’s boring, but it works. The problem is that the user can just simply close the new window and get back to the parent. That’s where method two comes in.


Method Two: Open and Close

Method two also incorporates the new window but it goes one step further. It closes the parent window once the new window opens.

You get the effect but setting the open window code to a function. After the function runs, you set a self.close()command to close up the parent window. The code and the text link that fires the code looks like this:

<SCRIPT LANGUAGE=”JavaScript”>

function goNewWin() {

//***Get what is below onto one line***

window.open(“backbuttonnewpage.html”,’TheNewpop’,’toolbar=1,
location=1,directories=1,status=1,menubar=1,
scrollbars=1,resizable=1′);

//***Get what is above onto one line***

self.close()

}

</SCRIPT>

<A HREF=”javascript:goNewWin()”>Click to go to a new page</A>

I can show you the effect right here, but this window would close so here’s what we’ll do. I’ll spawn a new window that contains the code above. Take that as the parent window. You’ll click on the link in that window and it’ll span yet another new window and then close itself.

Confusing? Maybe. Let’s try it.

The effect works pretty well across browsers, but it does have one downfall. MSIE browsers now often ask if you want the main window closed when it received the self.close() command. That pretty much kills the effect.

If you’d like the effect to occur without your user clicking a button, set the function “goNewWin()” in the BODY tag and trigger with an onLoad Event Handler.

<BODY onLoad=”goNewWin()”>

Which brings us to Method Three.


Method Three: Frames Trap

This is how I’ve seen the effect achieved numerous times. Again, it is not infallible. Users can get around it, but it is pretty clever in terms of coding.

Here’s the basic thought process. You set up a two-frame format that has one frame set to 100% and the second, of course, set to zero. It doesn’t matter if you use columns or rows. One frame is totally hidden anyway. I used columns. The code looks like this:

<FRAMESET COLS=”100%,*”>
<FRAME SRC=”goback.html”>
<FRAME SRC=”fillerpage.html”>
</FRAMESET>

You’ll notice that in the frame set to zero, I still make a point of adding a page. You still need to do that simply because it stops the browser from throwing a page not found and slowing down the process. The page is blank.

OK. In the 100% frame, I have a page named “goback.html”. The user will never see that page mainly because it is nothing more than a redirect to the page I want. The page “goback.html” contains no visible text but rather the code:

<META HTTP-EQUIV=”refresh” CONTENT=”.0; URL=nobackpage.html”>

See what’s happening? The user logs in and the two frames load. The page “goback.html” immediately redirects the 100% frame to jump to a new page, “nobackpage.html”.

If the user clicks Back, the “goback.html” page loads and the “nobackpage.html” page pops right back up.

Again, it can be thwarted by clicking quickly or right clicking on the Back button and jumping back past it. Even so, it’s a new effect.


That’s That

Thanks for reading. I’m not sure that this is an effect you’ll want to use a great deal, but there it is. How you find a decent use for it.

  Enjoy!

[Three Methods]
[Method Two: Open and Close]
[Method Three: Frames Trap]
[HTML Goodies Domain]

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured