I am trying to disable the browser back button via JS code and have already seen lot of answers like
How can I stop the browser back button using JavaScript?
and
Trying to disable the browser's back button
But my problem is unique, The issue is that once my page is loaded and I don't click inside the document (Anywhere on the page) my browser back button still function the way it use to.
But If I click inside the document/page, all the above scripts and code works properly.
So the I want to ask that if there is any way I can make the document(page) active somehow so that if the user click directly on back button without clicking inside the page, They should not go back.
In my site I have many href and button that relocate the page you are in. I thought that, since you can't modify the body of the alert created with onbeforeunload, I can make my own type but my questions are:
Can I intercept when the page is relocated inside my site without onBeforeUnload or onUnload?
Can I make a function wait until a button i pressed?
Is it possible to intercept some other changes of the browser page like if the user try to close it?
Is it possible to disable the entire page and leave only a toast be available?
I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.
Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.
to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !
You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..
If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.
You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.
Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites
Just wondering.
I have a page in Jquery Mobile which uses a popup that opens as a fullscreen page on smartphone displays:
Desktop/Tablet:
Smartphone:
Problem is, if the user views the page on smartphone, this looks like a real page. When the user hits the "back" button I provide, I'm just closing the popover. However, if the user hits the browser back button, he's leaving the page, because he never went a page down in the history.
Question:
Since I can't disable the browser back button, is there another way to create a browser history entry when the popover opens, so when the user presses the back button, I'm simply closing the popover and the browser history is back on the initial page vs. going "-1". If there are other workarounds to achieve this I'd also appreciate any suggestions.
Thanks!
Maybe what you can do is add the popover as a dialog page if the webpage is opened from a smartphone (you can use user-agent to check for this). You might want to check http://jquerymobile.com/test/docs/pages/page-dialogs.html That way it will be added to the browser history.
Try adding a live Vclick.
or
you could try disabling the class ui,
Example:
class="ui-disabled"
I am creating an internal web based application that will not be the target audience of the web.
I understand the frustration of alert boxes and forcing people to do certain things.
With that said, what I am attempting to do is create a javascript function, that unless a user clicks a link on a specific page, if they try to navigate away from the page other than using a link on the page, I would like to alert them and say, sorry you need to click the appropriate link to exit.
What my issue is, is that I need to lock out fields, and what I can do when a user hits an edit page, im going to write to a table that user to the lockoutuser colum. If a value exist, that user can access the record if it is null, it means no one is editing the record. If someone clicks to go into that record they lock it out, my means of updating the lockoutuser colum could be ajaxy on unload of the page, but the page could be unloaded for 2 reasons, 1 the edit form is submitted or the user leaves the page.
An alert that would say, sorry you can leave this record without clicking the big red button that says unlock, and force the user without refreshing to stay on the page.
I understand the machine could crash and or an alt f4 or a brute end task on the browser will still leave me other work to unlock the record
You need to use the onunload event of the page to present a messagebox when the user tries to leave your page. Check out this example: http://www.codetoad.com/javascript/miscellaneous/onunload_event_eg.asp