JavaScript HistoryAPI enables search engines to capture AJAX content _ javascript skills

This article mainly introduces the HistoryAPI of JavaScript that enables search engines to capture relevant information about AJAX content. If you need it, you may not find it when you browse Facebook's album, when the page is refreshed locally, the address in the address bar is changed, and it is not a hash method. It uses several new APIs of HTML5 history. As a global variable of window, history is no longer a new thing in the era of html4. We often use history. back () and history. go ().

I never thought I could do it until I saw the solution of Robin Ward, one of Discourse's founders two days ago.

Discourse is a forum program that relies heavily on Ajax, but must be indexed by Google. The solution is to discard the well number structure and use the History API.

The History API is used to change the URL displayed in the browser address bar without refreshing a new page (to be precise, it is to change the current status of the page ). Here is an example. You can click the button above to start playing music. Then, click the link below to see what happened?

The URL in the address bar has changed, but the music is not interrupted!

History API details are beyond the scope of this article. To put it simply, it adds a record to the browser's History object.

The Code is as follows:

Window. history. pushState (state object, title, url );

The above command will display a new URL in the address bar. The pushState method of the History Object accepts three parameters. The new URL is the third parameter, and the first two parameters can be null.

Window. history. pushState (null, null, newURL );

Currently, all major browsers support this method: Chrome (26.0 +), Firefox (20.0 +), IE (10.0 +), Safari (5.1 +), and Opera (12.1 + ).

The following is the method of Robin Ward.

First, use the History API to replace the well number structure and change each well number to a normal URL, so that the search engine can capture every webpage.

Example.com/1
Example.com/2
Example.com/3

Then, define a JavaScript function to process the Ajax part and capture the content based on the URL (assuming jQuery is used ).

　function anchorClick(link) { 　　　　var linkSplit = link.split('/').pop(); 　　　　$.get('api/' + linkSplit, function(data) { 　　　　　　$('#content').html(data); 　　　　}); 　　}　

Then define the mouse click event.

　　$('#container').on('click', 'a', function(e) { 　　　　window.history.pushState(null, null, $(this).attr('href')); 　　　　anchorClick($(this).attr('href')); 　　　　e.preventDefault(); 　　});

You must also consider clicking the "forward/backward" button in the browser. This will trigger the popstate event of the History object.

　window.addEventListener('popstate', function(e) {   　　　　anchorClick(location.pathname);  　　});　

After the above three pieces of code are defined, the normal URL and AJAX content can be displayed without refreshing the page.

Finally, set the server side.

Because the well number structure is not used, each URL is a different request. Therefore, the server must return the following webpage structure for all these requests to prevent 404 errors.

　  　　　　 　　　　　　
  　　　　　　
 
   　　　　　　　　... ... 　　　　　　
  　　　　 　　

Looking at the code above, you will find a noscript tag, which is the secret.

We put all the content to be indexed by the search engine in the noscript tag. In this way, you can still perform AJAX operations without refreshing the page, but the search engine will include the main content of each page!