My goal here is to create a Javascript function in a one-page app that can tell me if the back-button would do anything.
I thought that window.history.length would help me: if the length is same as when the app started, you are at "the beginning" and the function should do nothing.
But no. Imagine that there is one internal link in the app, #a. When you start the app from a new tab, the browser is at #, the length is 1 and you know the back button will do nothing. If you click the #a, you go to #a, the length is 2, and you know the back button would work.
Then, sadly, if you do press the back button, you go back to #, but the length is still 2, because #a is in the "future history".
Help me out. How do I know whether the back button is currently "active"? This is killing me.
(The problem is a little complicated by the idea that there might be a URL from a completely different site in the history. For me, that should be treated as "inactive", even though the back-button would itself actually work.)
Assuming your users never modify the url manually, then the only ways they navigate are by either
Pressing a button/link in your app, or
Pressing the back button
Therefor, you can track this with your own history. Every time a button is clicked, store what page it was on and that a button was clicked (possibly in localstorage). Then, when it loads again you can simply test whether or not where the user is now was reached by hitting a button/link or hitting back. If it was by hitting back, decrement your history. If you have no recorded history, you know the back button either won't work or goes to a different site.
The solution is to store route changes within your app and keep your own state history. This is because of the following:
For security reasons the History object doesn't allow the
non-privileged code to access the URLs of other pages in the session
history, but it does allow it to navigate the session history.
To do this in angular you need to use the $locationChangeSuccess event. See: How to detect browser back button click event using angular? for detecting back button and if its not back button simply append to an array that you track.
Related
I'm building a text editor in my website, the workflow is as follows.
In /list, the user picks an entry they want to edit from a list which takes them to /edit/[article_id].
The user does their work, and then clicks submit.
The server processes the thing, and redirects them back to /edit/[article_id] which by now reflects the edited work. The server also activates a flash message on the page to indicate the edit was successful.
By this point, the user probably wants to go back to /list and clicks the browser's Back button. This will take them back to the editor repeatedly depending on how many times they submitted.
I've tried putting a Back button somewhere on the page, but a good many users simply ignore it.
I'd rather not make the submission posted via AJAX, since that would also affect the flash message system.
What I like to do, is replace the last entry on the history list when the user submits, without changing its length. Is it possible?
Try this
window.location.replace(url);
after using replace() the current page will not be saved in session history, meaning the user won't be able to use the Back button to navigate to it.
Use window.close():
close();
Note: the current tab is implied. This is equivalent:
window.close();
or you can specify a different window.
So:
function close_window() {
if (confirm("Close Window?")) {
close();
}
}
with HTML:
close
or:
close
You return false here to prevent the default behavior for the event. Otherwise the browser will attempt to go to that URL (which it obviously isn't).
The main question: I need to know that previous link in my browser - is link of my site?
There are several problems:
I can put current url to my stack, and when i go back through my internal method, I just remove it from url. But! If I go back or forward by press browser button how can I know is back or forward event?
If I have a stack, after refresh page this stack is clear, but browser has a history (browser buttons back and forward is active).
This is the single page backbone application.
Thanks!
After long investigation of this problem, I understand that browser (substantially I do it in Chrome) do everything to not give application information about browser history. Because it's security information. So legal way to do this does not exist.
So, in my case I assume that refreshing browser restarts single page application, and it has no history. And I serve my own history using managed Backbone router events and "back" event is handled only by clicking on MY button "back", but not browsers.
I'm using ASP.Net/VB. The problem is that I have some floating DIVs that make you want to hit back in your browser to close the floating DIV instead of clicking close.
My idea is that when you click a button on the page to open a form in a floating DIV, it adds a browser history entry for "#" if the most recent history isn't already "#". When you close the form on the floating DIV, delete the browser history for "#" that we added. If the user accidentally hits back while the form is displayed, they should remain on the page because it should try to go to "#". The form itself would disappear, and if the user hit back in the browser again, it would just work just fine.
If you know this is possible, let me know and I can figure out how to do it myself, I just don't want to spend too much time attempting to do something that's not possible.
I would consider looking into the History API and more specifically, pushState() within javascript. I've been using it and it's so much better plus search engines like it.
history.pushState(null, null, '/page.aspx?showform')
This allows you to change the URL without a refresh and you can do away with the hashes. Back/forward works fine.
This page sums it up nicely: http://diveintohtml5.info/history.html
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
A website contains a "random" link, which loads a url that returns a 307 redirecting to the url we want. It works fine: click it and you load a random page. The problem is that each time you click it, the browser assumes you're loading the same page: so if you're on the homepage, then you follow the random link 5 times, then you press back, you'll be taken all the way back to the homepage, with no way to find the random pages you were just looking at. I want to modify this behavior so that users can access previous random pages via the back and forward buttons.
I don't own the website, so I can't just change the redirect code.
Here's what I've tried, all of which has failed.
Predicting what would be redirected to. While somewhat possible, there would be no way to avoid failure in up to .1% of clicks, and it would react very poorly to unexpected events, like a page that's published a day late, let alone a sit structure change.
Loading the 307 page via ajax. The request stops at readystate == 2 and I can't access the location header.
Cancel the click event and instead set location.href = random_link.href. This has no effect - the new page still doesn't go into history.
Have the new page call history.pushState. This successfully adds the page to history, but I can't find a way to distinguish between new pages and ones being opened via the back button, so the history quickly becomes very corrupted.
Keeping my own history in localStorage. As above, I can't tell when the back button is being used.
I'm working on a solution that I'm pretty sure will work, involving loading the page in an iframe over the existing page and using a background process and messaging to work around the fact that content injections from chrome extensions can't access window.parent from within iframes. And using the history API to reflect the current iframe's URL in the address bar, and get the back and forwards buttons to apply to the current iframe where appropriate.
While I'm pretty sure the last solution can be made to work, it's a hideously complex and heavyweight approach to what seems like a simple problem. So I thought I'd ask you guys before I continue: any other ideas?
Have you tried storing the locations in localStorage, then hi-jacking the back button ?
I am sure you know how localStorage works, for hi-jacking the back button you can refer to this : Is there a way to catch the back button event in javascript?
T.