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.
Related
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.
I have a website that has been entirely designed to operate without generating any browser history other then the main page. This was mostly for security so the browser state and the server never are out of sync.
I want to know if there is a way to intercept the browser "back" button when they are anywhere except on the main page of our site to operate an internal "back" button.
You can use Push State Navigation to handle browser's back button. Take a look at this link https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
I've seen a few web apps lately that by clicking buttons change the content and effective state of the page. Then they have links to navigate to another part of the app. Sometimes I'd then like to go back by pressing the browser back button, and I expect the page to be in the state it was when I left. But I often see the content from when I first entered that page.
What's a good way in a modern web app to architect the navigation so that back button returns to you the previous (last) state of the page.
This article may have some answers. It details how to use HTML5's pushState and popState to maintain state in an web app when forward/back are used, without fully refreshing the page.
http://diveintohtml5.info/history.html
Am not sure what u mean by "modern", but you might wish to check this discussion here (about how manipulation of browser history might be controlled and why [it's not evil sometimes]), and also look into this jQuery plugin (for hashable history and state).
And for a related SO Question : check this
I suppose you are referring to a dynamic one page app, powered by AJAX.
You can use the new PushState() and replaceState() methods of the history object, which are supported in most modern browsers (inc. IE10), and allow you to manipulate the browser's history without triggering a page refresh.
This allows you to attach an object to the state, which will be available to you once an onpopstate event has been triggered, that is, when the user presses back or forward in his browser.
once the object has been passed you can manipulate the page accordingly. e.g. you can pass a unique ID for a post, and load it with AJAX.
You can read more about it in Mozilla Developer Network
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.
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.