How do I change the browser URL (or URI) without a page refresh using HTML5 and HTML5Shiv for IE? For instance if I am on the page http://www.example.com and I want to go to http://www.example.com/4f6gt without having to reload the page. I understand how to load the content with AJAX, I have been using AJAX for a while now, but I am new to the HTML5 point of view for this. The reason I wanna do this is because I wanna be able to have people navigate pages without the time it takes to reload the DOM of the main page, but have a deep link that they can also go to so they have a one step way to get back. Thanks!!
Check out pjax or history.js
It's not going to work in < IE9, because IE doesn't support html5 history api (history.pushState() and history.replaceState()). The shim won't help. Should work in IE10.
Both those plugins degrade gracefully. History.js can also degrade with a hashbang to support dynamic content loads.
Related
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
Normally if you click a link the browser displays a little loading icon up in the tab until the page complete loading .
Is there any way to prevent the browser from displaying this little icon in the tab especially when dealing with iframes loading ?
Not directly, but you can design your website as a single page application. Implement your internal links with Javascript handlers which load the content with XMLHttpRequest and replace the current content when the response arrives.
Keep in mind that this makes your content practically invisible to search engines and breaks many browser navigation features your users will be used to.
You could write to the document via JavaScript after it has finished loading by using document.onload
I'm trying to mimic the effect of a browser loading a page with jQuery. I have an ajax based navigation set up with HTML5 history, but I'm lacking of the feel of the page loading. Facebook seems to have done this. All the calls on the page are done with ajax, yet the browser does a loading effect as if it was loading a regular link.
How would this be done? Have an ajax based navigation system that mimics native browser loading?
Edit:
My question is probably not clear enough, so I'll provide an example:
When browsing a regular page, what happens when you click a regular link the browser (let's use Firefox, because browsers behave differently..):
The tab title changes to "Connecting.."
The favicon changes to a spinner
The lower left popup displays "Loading/reading/waiting [link]" when it loads images, javascript files etc.
So everything above is what I consider native link click behaviour. Is there any way to mimic it (and not by changing the title or favicon temporarily)
Edit2:
This mimicking works somehow on Facebook. Using Firebug and navigating around, you can clearly see that the page doesn't change, yet the browser does the native loading stuff like changing the favicon to spinner, tab title changes to Connecting etc. The URL is rewritten with HTML5 history and the content is retrieved via /ajax/home/generic.php?ajaxpipe=1... How do they do that?....
So I'm attempting to write a script that will load content dynamically so that the page doesn't ever have to be refreshed (the main content will be replaced, but the sidebar, header, footer, etc., will remain in the same place). I've gotten my event firing, and I'm using pushState() to update my URL. However, I can't figure out how I should use the window.history.back() and window.history.forward(). Would I have to redefine those two functions in order to get it to successfully travel?
Though pushState() is history, you need to pass the URL so that the page will load without refreshing it.But windows.history.back() will take you the last page accessed from browser cache automatically.Here you not passing any URL.And the same is applicable to windows.history.forward() as well.
The easiest way I've found to do what (I think) you're after is to hook up your dynamically loading-ness to your window.location.hash, so:
window.location.hash='page_1';
You can then bind an event handler to the hash change and go AJAX down page 1.
Changing the hash causes a new history page, so you don't have to do anything with window.history at all.
You are using PushState to update URL, so your history is already handled for you in all browsers that support that functionality.
But older browsers do not support PushState, you might have to test
if (history.pushState) { //is supported }
I recommend that you use the History.js script here. It will revert to using the old onhashchange functionality, for HTML4 browsers and pushState for HTML5. You will not have to deal with history.forward manually.
On a side-note, Also, you do need to configure your .htaccess, so that bookmarks and page-links of your website work correctly.
Detailed Guide
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