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.
Related
Bit of background in the problem: I am working on a project that loads most of it's content via api calls in JS. The initial page is built in PHP and delivered ready to use, but every interaction/load after that is just done in JS async and pushed to the "content area" of the html. I'm adding QoL so that you can navigate back to where you were using your history/back/forward button, but in order to do that, every time you navigate using those buttons, I would like to force-refresh the page (for various reasons which I don't think are relevant but am happy to describe if requested).
I'm struggling to understand both pushState and pageShow when used in conjunction. As far as I know, I can use pushState to push new entries to the history object every time it's run, like so:
// Update history
var stateObj = {};
history.pushState(stateObj, response.data.title, uri);
That seems to be working when I run that section of code and check my browser history; a nice neat entry sitting there every time I run it. As far as I know, the title isn't actually supported by any browser, but it doesn't hurt to have it.
My issue occurs when I try to use that newly generated history with the back/forward buttons. As far as I can tell doing some google research, typical browser behavior will not actually reload the page when I press the back button. Herein is where I believe my problem occurs. While navigating to any url fresh will load that specific piece of content into the content area, the site is basically a single page application, loading content into the content area async as it needs it. It doesn't actually change pages. I'm not sure, but I think that is the core problem. I have tried to use several events to "catch" the back/forward behavior:
window.onunload
window.onpageshow
$(window).on("pagehide", function() {})
window.addEventListener("pageshow", function(event) {})
I know several of those are basically the same thing, but I was trying to cover my bases. I have looked around for a solution, and I know that window.onunload is SUPPOSED to override the bfcache (not even sure if that is my problem), but it doesn't seem to fire at all, no matter how many times I navigate between the history.pushState entries. I'm not familiar enough with any of these functions to tell where my problem is. What am I doing wrong?
I was browsing this website https://amaioswim.com/
and I did notice that when clicking on the navigation on the left side, the url address change instantly.
They also use a "fade out" and "Fade in" curtain to make the transition between pages seamless.
I'm wondering what kind of approach would you use to achieve this.
I know with JS you can change url, but only hashtags url... right?
or is it because they have a super fast server with 0 latency?
do you think they are loading everything ajax-ly in a same dvi container?
Thanks
This has little to do with the history API. (They are using that API to update the displayed URL, but that's a minor detail in how the site works; on its own it wouldn't create this behavior.)
This particular site is running a clientside framework. (I'm not seeing any obvious clues in the minified code as to which one.)
Links within the site are handled as AJAX requests. They're using the same endpoints for fresh page loads and for XHR calls, and are checking the X-Requested-With header to determine whether to send the full server-rendered HTML file (including the framework for the full site) or just the content for that particular page (which will be embedded clientside in the already loaded site.)
As evidence: this returns the full site (as when a user first visits that URL):
curl 'https://amaioswim.com/about'
This returns just the "about" content (as when a user clicks the "about" link after loading the site):
curl 'https://amaioswim.com/about' -H 'X-Requested-With: XMLHttpRequest'
(You can also see this by viewing the Network panel in the browser console while navigating the site.)
Loading just the content for an individual page is, of course, much faster than loading the entire page HTML (and its CSS and JS), and allows you to add glossy effects like crossfades and animations while the AJAX call is in progress.
Since some years you can use the html5 history api:
https://css-tricks.com/using-the-html5-history-api/
It will allow you to manipulate the url quite freely.
For example when you scroll to a new section you can put that section at the end of the browser url.
That's history API in action. Find more details here
Try the pushState and replaceState methods, that should get you this behavior. To have more precise control over these, you might also want to take a look at popState event
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'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
What I have is a MVC framework that I am manipulating the DOM via JavaScript and jQuery. Which to a point is a mute reference to this question. Through the MVC if I go to
domain.com/page/
I land on a default page with recent info, updates, etc. However through the MVC if I go to something like
domain.com/page/ref1/ref2/ref3
We can handle that on the backend to do what we want. When its gone to directly. So the thought here for this question is, can I mimic the behavior cross browser up to at least up to IE 6/7+, Firefox 3.x+, Chrome. And by mimic I mean manipulate the URL/URI like I would the DOM itself. This way when someone comes along and navigates to sections via the methods we manipulate the DOM and find something they want to share all they have to do is go up to the browsers URL bar, and then copy and paste it to a message.
What would be even nicer is a method that can work with the back and forth history buttons on browsers as well. All without having to reload/refresh the page.
have you tried
window.location.replace(URL)
This function doesn't load any pages.If you change your current location like this , when you redirect to somewhere , your last address will be the non-modified address.It doesnt write new URL to the browser history.So it would be like as if you just give the key to what the user wants to share.
Have you considered modifying the anchors in the URL? While on this page:
http://www.google.com/
Changing the URL to this:
http://www.google.com/#foo
... won't trigger a page refresh. So you could use (read/modify) the contents of the URL after the anchor all you want and the page won't get reloaded. Should be able to build on that idea.