This question already has answers here:
Javascript : Change the function of the browser's back button
(5 answers)
Closed 9 years ago.
Use Case :
I have a webpage which shows popovers for some of the functionalities. The popovers can be considered to be a HTML div which is shown when the corresponding button is clicked. And again go hidden when the cancel button is clicked / browser back button is clicked.
Problem :
Consider that the popover is shown. When the user clicks the back button, he should not get navigated back to the previous page instead only the popover div should get hidden.
How do I add this functionality using javascript to the browser back button?
Thanks in advance
It sounds like you're looking for the HTML5 History API.
A very good intro on how it works can be found at http://diveintohtml5.info/history.html .
Additional information can be found at http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html .
Also, you should look into polyfilling the feature for older browsers. There are plenty of options for doing so including https://github.com/browserstate/history.js , which includes some sample code and even a working demo (http://browserstate.github.io/history.js/demo/).
You can us hash which you append to the URL to fetch history changes.
index.html -> user opens popover -> index.html#popover
Now a click to the back button will redirect back to index.html. Of course this requires some amount of JavaScript code.
You cannot override the button actions in browsers for obvious security reasons, but you may add history entries programmatically, i.e. make the current page show twice in history, so that when the user click on the back button, he/she is redirected back to the same page. Use Really Simple History to achieve that.
Related
Using Javascript is it possible to hook a custom function to the browser back button while preventing the default event?
So simply put, the user clicks the browser back button, and instead of being taken back to the previous page on my site, my function fires. My aim is not to to prevent the user leaving my site.
Something like the below pseudo code:
window.backbutton.click(function(e){ preventDefault(e); myFunc(); })
FYI What I actually have is an internal back/forward system controlled by buttons within the view and I'd like to trigger my buttons when user clicks browser back.
You should look into Browser History https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history . It is a new standard for emulating pages (back and forward) on a single-page site.
you can do this
$(window).bind("beforeunload", function() {
return "Are you Sure you want to do this even though there are internal navigation buttons? if you do whatever you have done so far
will be gone unless it has been completed and/or submitted "; //
Return whatever message you want
});
Edit: this method displays a confirmation with the message and
automatically places buttons in the confirmation window
the author also clearly stated he does not want to prevent users from
leaving his site
see js fiddle http://jsfiddle.net/JW9fX/
Aaron - "updated question, I do not want to prevent them leaving my
site – Aaron 27 mins ago"
Edit: there is no definitive way to display a message only on the back
button in my knowledge i have also looked and have seen the only
methods that pick up on the back button are
$(window).bind("beforeunload",function(){return;}) and
$(window).onbeforeunload = function(){return;} and they both pick up
on when the page is refreshed or any other navigation away from the
current page. This is currently the best answer that can be provided
in the year 2014
Edit:
above is for all unload events
http://jsfiddle.net/Lhw2x/85/
been messing with that through all its lower objects it cant be done through javascript till someone decides to make all major browsers use a specific name for each unload event instead of it just being an unload event
so the answer is no you cannot hook a custom function to the browser back button while preventing the default event using javascript
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
I am making a web application which takes the exam related programming languages, and i am opening a pop up window for test when a user click to start a test ,
but i want to restrict them to go on the main broweser window until they submit the exam(pope up window closed automatically) or they will close manualy
As far as i know its not possible with javascript. but cant you better use a box that will lay on top of the original page content like you can do with Jquery.
http://jqueryui.com/dialog/#modal-form
Removing the buttons and other forms of cancelation and only leave a post button when all answers are given.
Is it possible to have a button on a webpage that will be named 'Back' and do window.history.back() if the user has navigated to the page from another page on your website and otherwise have some other title and be a direct link if the user navigated to your page from another website or went to the page directly.
Google plus on mobile seems to have this behaviour. When you click on a post in your stream then it has a 'back' button on the post page. However, if you go to the post page directly then it has a 'stream' button on the post page.
This seems tricky to implement because you don't have access to the urls in window.history.
Have you any chance of adding an ext lib like BBQ? It's a package used to manage the history behavior in your page.
I have done this before. You can do this with an anchor in the link. The anchor needs to have every get parameter of your application (i.e. application state) stored. Your application should be able to parse the anchor. To intercept the back button look here: stackoverflow.com/questions/136937/is-there-a-way-to-catch-the-back-button-event-in-javascript.
#benmmurphy I also had the same problem, then I used the following, which worked perfectly for me. You have to paste it on the page, from where you want to go back.
GO BACK
Hope this will help you.
I searched a lot to get rid of this problem on the internet but could not find a specific solution despite the problem being discussed in details previously.
The query is simple. My javascript dynamically adds an Iframe to the web page (which displays a feedback form). The problem is that, "after answering", now when the user clicks the back-button of the browser the iframe instead of the browser window is affected i.e. the questionnaire is displayed again. I want the browser back button to behave normally.
This behavior is really annoying and I am having real trouble fixing this.
I am using firefox.
Looking forward to the replies. Please inform me if I should give more details.
Thanks,
Your form has a submit button, which posts the page to the server. The back button will always send the user back to the form regardless of whether you use a iframe or not. The ideal way is to notify the user of a completed action, in this case thank the user for the feedback (using an alert box) and redirect the user to the home page or provide a button in the page saying "Back to Home".
Firefox and IE indeed act like you mentioned, but Chrome do not, and I'd guess other WebKit browsers would do the same.
In Chrome, clicking the Back button will land you where you want to go (the previous URL of the parent frame). i.e. Chrome to not add iframe URL changes in the back button history.
Sadly, I've found no way to force IE and FF to replicate this, so I used the AJAX post approach suggested above by Arun.
Here's my iframe source, which use jQuery to post the form, and replace the whole page with the result of that POST:
<form method="post" onsubmit="postForm(this);return false">
...
</form>
<script type="text/javascript">
function postForm(form) {
$.post(form.action, $(form).serialize(), postCompleted);
}
function postCompleted(data) {
$('html').html(data);
}
</script>
This works in all browsers; clicking the Back button will send you back to the previous URL a seen by the end user, instead of the initial form loaded dynamically in the iframe.
I encountered the same problem: I use a dynamically created iframe to show a "popup" on my page, whose SRC points to another page that has got a form and a submit button. After submitting that page, a JS callback is used to hide the iframe. As you explained, this causes a new entry to be added to the history (on IE at least).
But I found out that removing the iframe element from the DOM (instead of hiding it) results in the unwanted history entry being removed (tested on IE9)! Which is what the user would expect in that situation.
You can observe this yourself on IE9:
Open the back button menu (right-click the back button): you only have one entry for the current page
Press submit in the iframe => the back button menu shows one extra entry for the iframe
Remove the iframe from the DOM => the back button menu no longer shows that entry