I found on a google website, that they realized a url-change without reloading of the whole page.
Example:
you are on www.googleio.com/first
click a button
url changes to www.googleio.com/first/second
the content "first" disappears with an transition to the left, and the content of "second" appears with another transition. the page isnt reloading.
how is this done?
someone told me, that you use the Javascript function 'Header("Location: ../second")', which is aborted after the browser types the url into the adressbar, but before he reloads. the you just let the new content appear with some other javascript. is this true? i couldnt find anything about this.
or is there another solution?
thx a lot!
This does not seem like an actual page reload, however an use of AJAX with a pushState router.
What is actually happening is that your browser is making an AJAX call to fetch the next page, and then displaying it when it has received it.
It is using the HTML5 pushState feature to update the URL.
pushState (which you can read more about here) is an HTML5 feature which is similar to the hashes (#) that sites used to use.
Related
I am trying out popstate and pushState and I am wondering how to handle off page navigation.
Lets say I have an index page which generates a 'new page' when clicking something and it's loaded in with ajax. With popstate I change the url. In the page loaded are links that go outside of the current 'index' page. When somebody presses back they get a dumped state object.
How to prevent it so it actually loads the url that was given during the pushState?
Thanks in advance.
It seems you're doing something that causes the browser to replace its cached version of your index page with something else. Make sure your server sets the
Vary: Accept
header when returning the index page and later requests. See this Chromium issue for more information.
Have the link also use an anchor so the browser has a reference to fall back on.
Throw one of these at the beginning of each of the pages with a unique name attribute.
So your links would be:
Load the first page
and the page HTML would have this at the top somewhere:
<a name="first"></a>
Funny you made this post cuz I've got the exact same problem right now with this site I just started making yesterday: http://asims.fleeceitout.com - had to put arrows everywhere to keep people from gettin lost haha. I'll end up taking my own advice here but I'm too lazy for now. Plus I'm trying to see how much of the site I can make without a single <a></a> used.
How does Shopify do this? Go to their website, click on the Features link and you'll see that the URL in your browser's address bar says:
http://www.shopify.com/tour/sell-online
Then click on any of the sub links and you'll see that the URL in the address bar changes without using a hash and there is no page flip.
I don't think they are using ajax to change the content because it all appears to be included in hidden divs on the page, but regardless, you can apparently change the URL using client side tricks. Your help is appreciated?
You use the new HTML5 history API to push a new state.
Here's the MDN documentation and a good tutorial.
Beware that doing this is often painful (you have to manage correctly the state of your application) and it doesn't work with IE9. It's almost always combined with ajax : it's the solution to let dynamically loaded content be bookmarkable even while the whole page isn't reloaded or changed.
Look into pushState, but be aware it's not supported in all browsers.
On lifehacker.com when a user clicks a article on the right menu sidebar, the article & the page url changes, but the #rightcontainer always stays visible and , you never see it blink on the change of the page url, and when the article is ajaxed in (this is easy),
How would you change the page URL with a DIV staying visible on the page the whole time.
How is this possible? Javascript of some sort? (I think its freezing the browser then doing something, getting the data ready? )
I always thought you couldn't change the page url with javascript because of security issues.
I think you are looking for State Handling :)
It used to be done by adding # at the end of the URL, but now HTML5's State Handling features allow us to change the URL completely (ofc, within our domain)
The answer you need is located here:
https://github.com/browserstate/History.js/
Each url can include the same source as right container it won't refresh/blink as in browser cache.
you couldn't change the page url with javascript because of security
issues
A link can be followed via JavaScript if you require, its not regarded as bad practice (afaik). But there is no need to use javascript it could just be normal anchor/href.
A site that links to mine keeps my site in a frame, so I added the following JavaScript to my page:
if (window.top.location != window.location) {
window.top.location = window.location
}
Now if I get to my site via the offending site, my site successfully breaks out of the frame. But the back button breaks! The back button sends the user to the framed version of my site, which immediately breaks out again, returning him to where he was trying to leave! Is there a simple way to fix this?
window.top.location.replace(window.location);
The replace method is specifically for this purpose. It replaces the current item in the history state with the new destination so that the back button won't go through the destination you don't want.
jfriend00's answer is indeed correct. Using the window.location.replace method will work without affecting the back button.
However, I'd just like to note that whenever you want to stop a page from being framed, you should do more than just that! There are a couple methods of preventing a simple script like that from breaking out of the frame, which work in many modern browsers. Perhaps you can disable the page, display a message with a link to the full page, something like that. You could also use the X-Frame-Options response header that tells the browser not to display the page in a frame. If you don't take some of these measures, your site could be clickjacked.
Another solution is to open your site in a new window leaving a friendly message in the iframed site:
if (parent.frames.length)
{ window.open("mySite.htm", "MySite");
location.href= "framedMessage.htm";
}
Where framedMessage.htm contains some friendly/warning message.
I want to know how Facebook is doing their iframe footer bar. I mean, i know they have an iframe on footer, but i want to know how they are reloading pages without reloading the iframe also, 'cause the iframe always stick there even though the page does reload again. Any ideas/knowledge?
EDITED:
Try clicking on a link which is different section and it changes the url and so far i know, if you try to change the URL, then the page will reload again. Also, try using Facebook on Chrome: you will see it reloads on every new page. It's not AJAX, because the URL wouldn't change if it was AJAX (do little research on URL changing, you will know).
Well, powtac pretty much gave you the answer: Facebook doesn't reload the whole page when you click a link, it requests the new content via XMLHttpRequest and refreshes only those portions of the page that change.
It's pretty slick about this: a naive implementation might not use real links at all, thus preventing you from opening, say, a different Facebook tab in a separate browser tab.
This technique - intercepting link navigation - also allows Facebook to use custom prompts when you try to navigate away without saving, and re-write paths as fragments, allowing it to track the current location in the URL without reloading the page.
FWIW, this question has already been asked and answered - see: How are the facebook chat windows implemented?