Html5:history API No refresh change Address bar

Source: Internet
Author: User

HTML5 New History API can be implemented without refresh to change the Address bar link, with AJAX can be done without refreshing jump.

Simply put: Assuming the current page is renfei.org/ , then execute the following JavaScript statement:

window.history.pushState(null, null, "/profile/");

After that, the address bar's address becomes renfei.org/profile/ , but the browser does not refresh the page, and does not even detect whether the target page exists.

Application: Full-site Ajax, and enable the browser to crawl Ajax pages

What can I do with this? A more common scenario is to work with AJAX.

If the left side of a page is a number of navigation links, the right side is the content, while navigating only the right side of the content needs to be updated, then refreshing the entire page is undoubtedly wasteful. At this point we can use AJAX to pull the right data. However, if this is the case, the address bar will not change, the user can not go forward, backward, and can not collect the current page or share the current page to others; Search engine crawling is also difficult. at this point, you can use the HTML5 's history API to solve this problem.

Idea: Bind the click event first. When the user clicks on a link, the preventDefault function prevents the default behavior (page jumps), while reading the link's address (if there is jquery, can be written $(this).attr(‘href‘) ), the address is pushState plugged into the browser history, and then using AJAX technology pull (if there is jquery, You can use the $.get method) to replace the contents of the current Web page with the actual contents of this address.

In order to handle the user forward and backward, we listen to popstate events. When the user clicks the forward or Back button, the browser address is automatically converted to the appropriate address, and the popstate event occurs. In the event handler, we grab the corresponding content according to the current address, then use AJAX to pull the actual content of this address, rendering, can be.

Finally, the entire process does not change the page title, you can document.title change the page title by directly assigning the value.

Reference Source: http://www.renfei.org/blog/html5-introduction-3-history-api.html

Html5:history API No refresh change Address bar

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.