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
Related
I am newer to JavaScript and I am working on a website where I want to be able to switch the URL when I click on certain elements of the site without reloading the page.
I want it to work like http://www.itemcycle.com when you click on the link to sell your iPad or iPhone and then select your model. It shows different boxes, and when you click on them, it changes the URL but I know it's not loading a new page because it doesn't scroll me back to the top.
Thanks in advance for your help!
what you are seeing is a single page application
A single-page application (SPA), also known as single-page interface
(SPI), is a web application or web site that fits on a single web page
with the goal of providing a more fluid user experience akin to a
desktop application.
It will be achieved by using certain JS frameworks. AngularJS is the popular one.
Try this:
window.location.href="/yourUrl";
HTML5 introduced the history.pushState() which allows you to add and modify history entries.
window.history.pushState('page1', 'Title', '/page1.php');
This might worth looking.
There's 2 main ways to redirect a user, each with it's tradeoffs:
You can redirect a user to a new page by changing the value of window.location.href. So for instance window.location.href='https://example.com'; will redirect a user to https://example.com. Note this will do a hard page reload, so the page will actually reload.
To change the url path without redirecting the user to a new page you can do use history.pushState. Doing something like:
history.pushState({}, "page 2", "/page2");
will change the url from https://example.com to https://example.com/page2 and the scroll position won't change. You can then listen to changes from history.pushState and update the page accordingly giving you effect you're looking for. Note you cannot change the domain (i.e. you can't go from https://example1.com to https://example2.com), but on the plus side the page will not actually be reloaded.
As others have pointed out there are various frameworks which allow you to do this type of thing, but those frameworks are making use of the techniques I've described above.
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 have some back/next buttons set up for a phonegap app built in angular.js.
I'm using partials in angular for the pages and using window.history as some simple back/next buttons. All is working good but I'd like to add some visual feedback as to when the back and next functionality becomes available.
Is there a way to check if the history.forward is available?
the next page wont be known, so I dont think looking through the pages in the history is a viable solution to this, it shouldnt kneed to know what page its on or what pages the app contains, something like (sudo)
if(window.history.forward()){
// show buttons as available
}else{
// show buttons as not available
}
Sadly history only returns undefined, but is there any other way?
Any suggestions would be great
thanks
history doesn't allow this, still you can get history.length to check if there is history at all (if not - just disable both buttons).
Or you can "dirtyhack" it by wrapping the whole site or app with 100% width|height borderless iframe on your "index" page and log this iframe's hisory "manually" from the top window (not advised at all; will work for the same domain only; will not work with "X-Frame-Options:DENY" on your server).
I was browsing thought GitHub today and noticed that the individual repository navigation doesn't use hash-bangs in the URL /#! or /# and the back button still works. How do you think they are accomplishing this? How does this affect search engine crawling from Googlebot? I know it looks for # in the url.
I'm really quite curious as I know using /# is quite debatable.
Here's an example: https://github.com/mirah/pindah
Thanks!
They blogged about it a while back:
https://github.com/blog/760-the-tree-slider
The effect is implemented history.pushState() function and handlers on the popstate event — both a part of the HTML5 DOM interface in some browsers.
Clicking the link uses pushState() to update the location and load new data into the page without reloading the whole page. Handling popstate makes the back button work correctly.
The GutHub blog calls their particular usage the “Tree Slider” (it loads the content for tree members and visually slides it into place). The effect and its implementation was described on the GitHub blog.
I have seen that navigation in Google+ isn't normal navigation as in other sites. Many elements remain the same, and I am sure it isn't a
$('body').load()
or something like that because the page actually reloads and the URL changes.
Can anyone explain to me how it's done?
It is using AJAX. And with that, it is also using the History API.
The History API allows you to control the history of the browser, changing the URLs to change the state of the website. Each state is a different URL. The only drawback is that it's not supported on older browsers, on which it fallbacks usings hashbangs (it appends #foo/bar to the URL).
So it uses some kind of $('body').load(), except it doesn't use jQuery.
There are many way to achieve this you need ajax/Jquery usually.
$('#randomdiv').load('load.php');
This loads load.php generated html in div randomdiv