I am trying to implement content browsing like it is done on Facebook when user is browsing the photos. I guess everyone is familiar with that photo browsing where you can click "next" and "previous" and immediately get the next or previous photo (you can also navigate using arrow keys).
When you click "next" for example you notice that the page does not refresh - only the content. At first I thought it is done using plain ajax calls which refresh only the "content" in this case the image, description and comments. But then I noticed that also URL in the "Location" toolbar of my browser is changed!
I tried to inspect this using Firebug and discovered that when you click "next" only the next photo is downloaded and I still don't know from where the comments & image meta data (description, time, tags,...) are loaded.
Can someone please explain how this technique is done - page URL changes without page refresh (or even without page "blinking" if it refreshes from cache).
I know how to change page content using ajax but URL of that page stays the same all the time. If I click on "refresh" button I get the first page again. But not on Facebook since even the "window.location" is changed every time without actual redirect.
The other thing I noticed is that the bottom toolbar (applications, chat, ...) is "always on top". Even if you change the page, this toolbar is not refreshed and always stays on top - it doesn't even "blink" like other pages that are refreshed (either from webserver or from local cache). I guess this is the same technique as above - some kind of "fake" redirects or something?
The Answer is pushState
if (window.history.pushState)
window.history.pushState([object or string], [title], [new link]);
You will smile :)
I've tried to change through facebook images, and this is what I saw:
In Firefox:
The page URL is not changing. Only the hash is changing. This is a technique used to allow crawlers to index the content. What happens is this:
User clicks on "next"
JS loads the next image with tags, comments, etc and replaces the old content with them.
JS changes the hash to correspond the new image
urls look like this:
http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (notice the hash)
As for the second question, this is just a benefit of the technique above. When you are on facebook, the page rarely gets actually refreshed. Only the hash is changed so that you can send links to other people and crawlers can index the content.
In Google Chrome:
It seems that chrome hassome way to change urls without refreshing the page. It does that by using window.history.pushState. Read about it here.
urls look like this: http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (notice that there is no hash here, but still the url is changing along with images)
In Epiphany:
Epiphany doesn't change the URL when the image changes.
urls look like this: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (there is no hash, and the URL stays the same when changing the image)
(don't have other browsers to verify right now)
The one technique not mentioned here is the window.onhashchange() method (supported in ie8+ and most others) which they might have used
You may noticed that the page url remain the same. What is changed, however, is page hash (the part after # in the url).
You need something like this: http://code.google.com/p/reallysimplehistory/
Related
I have a bookmarklet that opens a dialog (in reality an iframe) and extracts some information. When the dialog is dismissed I want to put that information into edit text fields on the original page in the browser (like the way LastPass will automatically fill-in login forms on a page).
Is this possible? I'm thinking that same-origin-policy will prevent this, but maybe there is a way (without installing extensions such as greasemonkey, etc).
Edit: to be more precise: the bookmarklet appends a DIV to the original page; that DIV contains an IFRAME that loads my page; this page fetches some information; once this information is fetched within the IFRAME I want to remove the DIV and (somehow) put that information into the original page.
The issue I face is communicating the information in the IFRAME back to the original page.
What you are looking for are the functions addEventListener and postMessage.
Relevant links:
http://caniuse.com/#feat=x-doc-messaging
How do you use window.postMessage across domains?
If you carefully notice facebook, you will understand that the when you visit one page to another then the whole page is not refreshed or redirected but the URL changes when navigating to new page. It is more clear when chat windows are open, they remains static during page loading. As other website does this by using the # but facebook does not.
There is another example came to me: http://www.davidwalsh.name/. Visit the site and open other pages within their site and you will understand what I mean. Don't forget to notice the URL change.
How they do this?
Added More: I want a way that the page content will be loaded with ajax, change the URL for bookmark feature but when changing URL it should not reload / refresh the page by not using # (hash).
You have two questions:
For the URL change you can put the path instead of the # in the href property of the anchor (e.g /otherlink).
For opening the chat or opening some div does not require to send it in the url, its the onclick event on the div and its expands. Also the chat remains open may be thay set cookie or flag when the chat is first time opened and checking and changing the chat with flag they are setting.
As suggested by #andytuba
For Facebook, Google "hash navigation ajax".
For DavidWalsh, google "history API".
Railscasts (and I've seen this technique elsewhere) seems to be modifying the URL (by adding/changing a query string) but delivers back an ajax request without reloading the entire page. How are they modifying the URL without triggering a whole page refresh? It doesn't appear at least to be using HTML5 history, since there is no history created (can't go back/forward).
http://railscasts.com/episodes/81-fixtures-in-rails-2-0
Then click any of the tabs "Show Notes", "Comments", "Similar Episodes" and watch how the query string changes, but the page does not refresh (confirmed via Firebug).
Any ideas?
It uses history.replaceState(). Quoth MDC:
history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.
No new history entry, nothing to go back/forward to.
I couldn't really word the title very well, but here's my problem: I've got a webpage that reads from a database each time the user clicks a button, the content is then replaced for part of the page.
Because it is an ajax load, everything is done in the background, and so the URL stays the same. This wasn't be a problem at all until I realised that I will want to have a different Facebook comments box for each set of content that is loaded - so if someone comments, it is posted to their facebook profile, people click on the link and are then taken to different content.
So... what I need is some way of referencing each set of content, and I've found a site that does exactly that (I'm sure there are a lot of them).
Here's the link.
Each set of content has a different 'hash code' (because I don't know the actual name for it) which is appended to the URL - in this case the code is "#1922934", this allows people to post links to it that specific set of content on Facebook etc. - and also allows a different Facebook comment box for each set of content.
Does anyone know how such a set-up can be achieved or how these 'hash codes' work?
Here's a document from wikipedia on it.
[http://en.wikipedia.org/wiki/Fragment_identifier][1]
The main idea is that URI fragments are used because they don't cause a page reload. They also can be used to refer to anchors on a web page.
What I would do is on page load use JavaScript to read the URI fragment (location.hash) then make a request to your server to load the comments etc. The URI fragment cannot be read by a server and is only found through a client (browser)
Sounds like you want something like SammyJS.
I am trying solve the back button issue within my app. The scenario is:
I have a home page with a search form which sends and receives data with $.ajax(), then the results loaded through ajax, their links points to a controller that won't be done by GET in ajax so that means that the page will be refreshed (so the home page with the results looks like this: http://url/en/home and a result link may look like this http://url/fetch/data/x123av).
The problem is which is the best way fix that when click back button to return the results from the search box?
I have found some answers in stackoverflow related to my question:
http://code.google.com/p/reallysimplehistory
http://tkyk.github.com/jquery-history-plugin
But from the documentation of those plugins, they all work by checking the hash change which I don't have.
Hope I have explained well enough, and I do have searched stackoverflow and google for a solution but I didn't find one that is close to this or either I've jumped over it...
Please just point me to the right way :D
But from the documentation of those plugins, they all work by checking
the hash change which I don't have.
If you want to handle the back button with AJAX request you will have to redesign your application so that it works with hashes as that's the only way. Changing the fragment portion of an url doesn't trigger a page reload but it is added to the history, so when you press the back button you are able to detect this change without navigating away from the page.
As mentioned by SLaks in the comments section another possibility is to use the HTML5 history API but obviously this assumes that the client browser supports it.