HTML5-History-API

HTML5 History API expansion for browsers not supporting pushState, replaceState

1,007

181

1,007

View on GitHub View on NPM

Top Related Projects

Modernizr

25,667

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.

history

8,332

Manage session history with JavaScript

turbolinks

12,680

Turbolinks makes navigating your web application faster

html

8,619

HTML Standard

Quick Overview

The HTML5-History-API is a JavaScript library that provides a polyfill for the HTML5 History API. It enables developers to use the History API in browsers that don't natively support it, allowing for the creation of single-page applications with proper URL handling and browser navigation support.

Pros

Enables HTML5 History API functionality in older browsers
Simplifies the creation of single-page applications
Lightweight and easy to integrate
Well-documented with examples

Cons

May not be necessary for projects targeting only modern browsers
Requires additional JavaScript to be loaded and executed
Potential for conflicts with other history manipulation libraries
Limited maintenance and updates in recent years

Code Examples

Pushing a new state:

history.pushState({ page: 2 }, "Page 2", "/page2");

Replacing the current state:

history.replaceState({ page: 3 }, "Page 3", "/page3");

Handling popstate events:

window.addEventListener("popstate", function(event) {
  console.log("Current state:", event.state);
});

Navigating through history:

history.back();  // Go back one step
history.forward();  // Go forward one step
history.go(-2);  // Go back two steps

Getting Started

Include the HTML5-History-API script in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/html5-history-api@4.2.10/history.min.js"></script>

Use the History API methods as you would normally:

// Push a new state
history.pushState({ page: 1 }, "Page 1", "/page1");

// Handle popstate events
window.addEventListener("popstate", function(event) {
  if (event.state) {
    console.log("Navigated to page:", event.state.page);
    // Update your application state here
  }
});

Ensure your server is configured to handle HTML5 pushState URLs by serving your main HTML file for all routes.

Competitor Comparisons

Modernizr

25,667

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Pros of Modernizr

Broader feature detection capabilities, covering a wide range of HTML5 and CSS3 features
Active community and regular updates
Extensive documentation and examples

Cons of Modernizr

Larger file size, which may impact page load times
More complex setup and configuration
Potential overhead for projects that only need specific feature detection

Code Comparison

HTML5-History-API:

history.pushState({page: 1}, "title 1", "?page=1");
history.replaceState({page: 2}, "title 2", "?page=2");

Modernizr:

if (Modernizr.history) {
  // Use HTML5 History API
} else {
  // Fallback for older browsers
}

HTML5-History-API focuses specifically on providing a consistent History API across browsers, while Modernizr offers a comprehensive feature detection solution for various HTML5 and CSS3 features. HTML5-History-API is more lightweight and targeted, making it ideal for projects that only need History API support. Modernizr, on the other hand, provides a broader range of feature detection capabilities, making it suitable for projects that require extensive browser compatibility checks across multiple features.

history.js

10,721

Pros of history.js

More comprehensive cross-browser support, including older browsers
Offers a simpler API for common use cases
Provides additional features like state management and HTML4 fallback

Cons of history.js

Larger file size due to broader compatibility and feature set
Less actively maintained, with fewer recent updates
May include unnecessary code for modern web applications

Code Comparison

HTML5-History-API:

history.pushState({page: 1}, "Title 1", "?page=1");
history.replaceState({page: 2}, "Title 2", "?page=2");

history.js:

History.pushState({state:1}, "State 1", "?state=1");
History.replaceState({state:2}, "State 2", "?state=2");

Both libraries provide similar functionality for manipulating browser history, but history.js uses a capitalized History object, while HTML5-History-API uses the native history object.

HTML5-History-API focuses on providing a polyfill for the HTML5 History API, making it more lightweight and suitable for modern web applications. It closely mimics the native API, making it easier to transition to native support when available.

history.js, on the other hand, offers a more feature-rich solution with broader browser support, including older versions. It provides additional utilities and a slightly different API, which may be beneficial for projects requiring extensive backwards compatibility.

history

8,332

Manage session history with JavaScript

Pros of history

More actively maintained with frequent updates
Broader browser support, including older versions
Extensive documentation and examples

Cons of history

Larger package size
Steeper learning curve for beginners
Less focus on pure HTML5 History API implementation

Code Comparison

HTML5-History-API:

history.pushState({page: 1}, "Title 1", "?page=1");
history.replaceState({page: 2}, "Title 2", "?page=2");

history:

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
history.push('/home', { some: 'state' });
history.replace('/about', { more: 'state' });

Key Differences

HTML5-History-API focuses on polyfilling the native History API, while history provides a more abstracted and feature-rich approach.
history offers additional utilities like location parsing and memory history for non-DOM environments.
HTML5-History-API aims for a smaller footprint and closer adherence to the native API.

Use Cases

Choose HTML5-History-API for lightweight projects requiring basic history manipulation and broad compatibility.
Opt for history in larger applications, especially those using React Router or similar frameworks, for more advanced routing capabilities.

turbolinks

12,680

Turbolinks makes navigating your web application faster

Pros of Turbolinks

Faster page loads by replacing only the <body> content
Automatic handling of browser history and URL updates
Seamless integration with Rails applications

Cons of Turbolinks

Potential conflicts with JavaScript-heavy applications
Learning curve for developers unfamiliar with the Turbolinks lifecycle
May require additional configuration for certain third-party libraries

Code Comparison

HTML5-History-API:

history.pushState({page: 1}, "title 1", "?page=1");
window.addEventListener("popstate", function(e) {
    console.log("popstate event", e.state);
});

Turbolinks:

document.addEventListener("turbolinks:load", function() {
    console.log("Page loaded with Turbolinks");
});
Turbolinks.visit("/new-page");

Key Differences

HTML5-History-API focuses on providing a consistent API for manipulating browser history across different browsers
Turbolinks is a higher-level solution that aims to speed up page loads in web applications
HTML5-History-API requires more manual implementation of navigation behavior
Turbolinks automatically handles most navigation scenarios out of the box

Use Cases

HTML5-History-API is suitable for developers who need fine-grained control over browser history manipulation
Turbolinks is ideal for Ruby on Rails applications or projects seeking to improve perceived page load times with minimal configuration

html

8,619

HTML Standard

Pros of html

Comprehensive documentation of the entire HTML specification
Actively maintained by the WHATWG community
Includes detailed explanations and examples for all HTML elements and APIs

Cons of html

Large and complex repository, potentially overwhelming for beginners
Focuses on the entire HTML spec, not specifically on the History API
May contain more technical and formal language

Code comparison

HTML5-History-API:

history.pushState({page: 1}, "title 1", "?page=1");
history.replaceState({page: 2}, "title 2", "?page=2");

html:

<a href="?page=1" onclick="history.pushState({page: 1}, 'title 1', '?page=1'); return false;">
  Go to page 1
</a>

Summary

HTML5-History-API is a focused library for working with the HTML5 History API, providing cross-browser support and additional features. It's ideal for developers specifically interested in manipulating browser history and state.

html is the official HTML specification repository, offering comprehensive documentation on all aspects of HTML, including the History API. It's best suited for those seeking in-depth understanding of HTML standards and implementations.

Choose HTML5-History-API for a targeted solution to History API manipulation, or html for a complete reference to HTML specifications and standards.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

ENGLISH

This Javascript library provides an emulation of HTML5 History API for older browsers.

The library operates according to W3C specification, adding no new or incompatible methods. The library can be used exactly as described, for example, in Dive Into HTML5 book (http://diveintohtml5.info/history.html) or in the History API Specification (http://www.w3.org/TR/html5/browsers.html#the-history-interface).

You may install this plugin with this command:

npm install html5-history-api

Browser Support:

history.js - IE8+ and other browsers

history.ielte7.js - IE6+ and other browsers

For library developers:

To enable support for HTML5-History-API polyfill in your library, you need to add one line of code:

var location = window.history.location || window.location;

code of library looks like this:

(function(){
  // To enable support for HTML5-History-API polyfill in your library
  var location = window.history.location || window.location;

  // you library code here
  // ....
  // ....
  // ....
})();

AMD Support:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="/require.js"></script>
    <script type="text/javascript">
      requirejs(['/history'], function() {
        if (history.emulate) {
          console.log('In your browser is emulated HTML5-History-API');
        } else {
          console.log('In your browser is natively support HTML5-History-API');
        }
      });
    </script>
  </head>
  <body>
  </body>
</html>

Example of using the library in the pure JS context:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="history.js"></script>
    <script type="text/javascript">
      (function(eventInfo) {
        // we get a normal Location object

        /*
         * Note, this is the only difference when using this library,
         * because the object window.location cannot be overriden,
         * so library the returns generated "location" object within
         * an object window.history, so get it out of "history.location".
         * For browsers supporting "history.pushState" get generated
         * object "location" with the usual "window.location".
         */
        var location = window.history.location || window.location;

        // hang on the event, all references in this document
        document[eventInfo[0]](eventInfo[1] + 'click', function(event) {
          event = event || window.event;
          var target = event.target || event.srcElement;
          // looking for all the links with 'ajax' class found
          if (target && target.nodeName === 'A' &&
             (' ' + target.className + ' ').indexOf(' ajax ') >= 0)
          {
            // keep the link in the browser history
            history.pushState(null, null, target.href);

            // here can cause data loading, etc.

            // do not give a default action
            if (event.preventDefault) {
              event.preventDefault();
            } else {
              event.returnValue = false;
            }
          }
        }, false);

        // hang on popstate event triggered by pressing back/forward in browser
        window[eventInfo[0]](eventInfo[1] + 'popstate', function(event) {

          // here can cause data loading, etc.

          // just post
          alert("We returned to the page with a link: " + location.href);
        }, false);
      })(window.addEventListener ? ['addEventListener', ''] : ['attachEvent', 'on']);
    </script>
  </head>
  <body>
    <a class="ajax" href="/mylink.html">My Link</a>
    <a class="ajax" href="/otherlink.html">Other Link</a>
  </body>
</html>

Example of using the library along with JQuery:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="history.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(function() {
        // we get a normal Location object

        /*
         * Note, this is the only difference when using this library,
         * because the object window.location cannot be overriden,
         * so library the returns generated "location" object within
         * an object window.history, so get it out of "history.location".
         * For browsers supporting "history.pushState" get generated
         * object "location" with the usual "window.location".
         */
        var location = window.history.location || window.location;

        // looking for all the links and hang on the event, all references in this document
        $(document).on('click', 'a.ajax', function() {
          // keep the link in the browser history
          history.pushState(null, null, this.href);

          // here can cause data loading, etc.

          // do not give a default action
          return false;
        });

        // hang on popstate event triggered by pressing back/forward in browser
        $(window).on('popstate', function(e) {

          // here can cause data loading, etc.

          // just post
          alert("We returned to the page with a link: " + location.href);
        });
      });
    </script>
  </head>
  <body>
    <a class="ajax" href="/mylink.html">My Link</a>
    <a class="ajax" href="/otherlink.html">Other Link</a>
  </body>
</html>

Advanced library configuration:

history.js?basepath=/pathtosite/ - the base path to the site; defaults to the root "/".
history.js?redirect=true - enable link translation.
history.js?type=/ - substitute the string after the anchor; by default "/".

You can also combine options:

history.js?type=/&redirect=true&basepath=/pathtosite/ - the order of options does not matter.

Or execute special method in JavaScript:

history.redirect(/* type = */ '/', /* basepath = */ '/pathtosite/');

Demo Site: http://history.spb-piksel.ru/ or http://devote.github.io/demos/history/

Follow me on Twitter: https://twitter.com/DimaPakhtinov

Ð Ð£Ð¡Ð¡ÐÐÐ (Russian)

ÐÐ¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ° ÑÐ¼ÑÐ»Ð¸ÑÑÐµÑ HTML5 History API Ð² ÑÑÐ°ÑÑÑ Ð±ÑÐ°ÑÐ·ÐµÑÐ°Ñ.

ÐÐ¾ Ð¿ÑÐ¸Ð½ÑÐ¸Ð¿Ñ Ð¼Ñ ÑÐ°Ð±Ð¾ÑÐ°ÐµÐ¼ Ñ HTML5 History API ÑÐ°Ðº ÐºÐ°Ðº Ð¾Ð¿Ð¸ÑÐ°Ð½Ð¾, Ð½Ð°Ð¿ÑÐ¸Ð¼ÐµÑ, ÑÑÑ http://htmlbook.ru/html5/history Ð¸Ð»Ð¸ Ð¿Ð¾ ÑÐ¿ÐµÑÐ¸ÑÐ¸ÐºÐ°ÑÐ¸Ð¸ http://www.w3.org/TR/html5/history.html#the-history-interface

npm install html5-history-api

ÐÐ¾Ð´Ð´ÐµÑÐ¶ÐºÐ° Ð±ÑÐ°ÑÐ·ÐµÑÐ¾Ð²:

history.js - IE8+ Ð¸ Ð´ÑÑÐ³Ð¸Ðµ Ð±ÑÐ°ÑÐ·ÐµÑÑ

history.ielte7.js - IE6+ Ð¸ Ð´ÑÑÐ³Ð¸Ðµ Ð±ÑÐ°ÑÐ·ÐµÑÑ

ÐÐ»Ñ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÑÐ¸ÐºÐ¾Ð² Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐº:

var location = window.history.location || window.location;

(function(){
  // ÐÐºÐ»ÑÑÐ°ÐµÑ Ð¿Ð¾Ð´Ð´ÐµÑÐ¶ÐºÑ Ð¿Ð»Ð°Ð³Ð¸Ð½Ð° HTML5-History-API polyfill
  var location = window.history.location || window.location;

  // ÐºÐ¾Ð´ Ð²Ð°ÑÐµÐ¹ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ¸
  // ....
  // ....
  // ....
})();

ÐÐ¾Ð´Ð´ÐµÑÐ¶ÐºÐ° AMD:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="/require.js"></script>
    <script type="text/javascript">
      requirejs(['/history'], function() {
        if (history.emulate) {
          console.log('Ð Ð²Ð°ÑÐµÐ¼ Ð±ÑÐ°ÑÐ·ÐµÑÐµ ÑÐ¼ÑÐ»Ð¸ÑÑÐµÑÑÑ HTML5-History-API');
        } else {
          console.log('Ð Ð²Ð°ÑÐµÐ¼ Ð±ÑÐ°ÑÐ·ÐµÑÐµ ÐµÑÑÑ Ð¿Ð¾Ð´Ð´ÐµÑÐ¶ÐºÐ° HTML5-History-API');
        }
      });
    </script>
  </head>
  <body>
  </body>
</html>

ÐÐ¾ÑÐ¾ÑÐµÐ½ÑÐºÐ¸Ð¹ Ð¿ÑÐ¸Ð¼ÐµÑ Ð½Ð° ÑÐ¸ÑÑÐ¾Ð¼ JS:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="history.js"></script>
    <script type="text/javascript">
      (function(eventInfo) {
        // Ð¿Ð¾Ð»ÑÑÐ°ÐµÐ¼ Ð½Ð¾ÑÐ¼Ð°Ð»ÑÐ½ÑÐ¹ Ð¾Ð±ÑÐµÐºÑ Location

        /*
         * Ð·Ð°Ð¼ÐµÑÑÑÐµ, ÑÑÐ¾ ÐµÐ´Ð¸Ð½ÑÑÐ²ÐµÐ½Ð½Ð°Ñ ÑÐ°Ð·Ð½Ð¸ÑÐ° Ð¿ÑÐ¸ ÑÐ°Ð±Ð¾ÑÐµ Ñ Ð´Ð°Ð½Ð½Ð¾Ð¹ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ¾Ð¹,
         * ÑÐ°Ðº ÐºÐ°Ðº Ð¾Ð±ÑÐµÐºÑ window.location Ð½ÐµÐ»ÑÐ·Ñ Ð¿ÐµÑÐµÐ·Ð°Ð³ÑÑÐ·Ð¸ÑÑ, Ð¿Ð¾ÑÑÐ¾Ð¼Ñ
         * Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ° history Ð²Ð¾Ð·Ð²ÑÐ°ÑÐ°ÐµÑ ÑÑÐ¾ÑÐ¼Ð¸ÑÐ¾Ð²Ð°Ð½Ð½ÑÐ¹ "location" Ð¾Ð±ÑÐµÐºÑ Ð²Ð½ÑÑÑÐ¸
         * Ð¾Ð±ÑÐµÐºÑÐ° window.history, Ð¿Ð¾ÑÑÐ¾Ð¼Ñ Ð¿Ð¾Ð»ÑÑÐ°ÐµÐ¼ ÐµÐ³Ð¾ Ð¸Ð· "history.location".
         * ÐÐ»Ñ Ð±ÑÐ°ÑÐ·ÐµÑÐ¾Ð² Ð¿Ð¾Ð´Ð´ÐµÑÐ¶Ð¸Ð²Ð°ÑÑÐ¸Ñ "history.pushState" Ð¿Ð¾Ð»ÑÑÐ°ÐµÐ¼
         * ÑÑÐ¾ÑÐ¼Ð¸ÑÐ¾Ð²Ð°Ð½Ð½ÑÐ¹ Ð¾Ð±ÑÐµÐºÑ "location" Ñ Ð¾Ð±ÑÑÐ½Ð¾Ð³Ð¾ "window.location".
         */
        var location = window.history.location || window.location;

        // Ð²ÐµÑÐ°ÐµÐ¼ ÑÐ¾Ð±ÑÑÐ¸Ñ Ð½Ð° Ð²ÑÐµ ÑÑÑÐ»ÐºÐ¸ Ð² Ð½Ð°ÑÐµÐ¼ Ð´Ð¾ÐºÑÐ¼ÐµÐ½ÑÐµ
        document[eventInfo[0]](eventInfo[1] + 'click', function(event) {
          event = event || window.event;
          var target = event.target || event.srcElement;
          // Ð¸ÑÐµÐ¼ Ð²ÑÐµ ÑÑÑÐ»ÐºÐ¸ Ñ ÐºÐ»Ð°ÑÑÐ¾Ð¼ 'ajax'
          if (target && target.nodeName === 'A' &&
             (' ' + target.className + ' ').indexOf('ajax') >= 0)
          {
            // Ð·Ð°Ð½Ð¾ÑÐ¸Ð¼ ÑÑÑÐ»ÐºÑ Ð² Ð¸ÑÑÐ¾ÑÐ¸Ñ
            history.pushState(null, null, target.href);

            // ÑÑÑ Ð¼Ð¾Ð¶ÐµÑÐµ Ð²ÑÐ·Ð²Ð°ÑÑ Ð¿Ð¾Ð´Ð³ÑÑÐ·ÐºÑ Ð´Ð°Ð½Ð½ÑÑ Ð¸ Ñ.Ð¿.

            // Ð½Ðµ Ð´Ð°ÐµÐ¼ Ð²ÑÐ¿Ð¾Ð»Ð½Ð¸ÑÑ Ð´ÐµÐ¹ÑÑÐ²Ð¸Ðµ Ð¿Ð¾ ÑÐ¼Ð¾Ð»ÑÐ°Ð½Ð¸Ñ
            if (event.preventDefault) {
              event.preventDefault();
            } else {
              event.returnValue = false;
            }
          }
        }, false);

        // Ð²ÐµÑÐ°ÐµÐ¼ ÑÐ¾Ð±ÑÑÐ¸Ðµ Ð½Ð° popstate ÐºÐ¾ÑÐ¾ÑÐ¾Ðµ ÑÑÐ°Ð±Ð°ÑÑÐ²Ð°ÐµÑ Ð¿ÑÐ¸ Ð½Ð°Ð¶Ð°ÑÐ¸Ð¸ back/forward Ð² Ð±ÑÐ°ÑÐ·ÐµÑÐµ
        window[eventInfo[0]](eventInfo[1] + 'popstate', function(event) {

          // ÑÑÑ Ð¼Ð¾Ð¶ÐµÑÐµ Ð²ÑÐ·Ð²Ð°ÑÑ Ð¿Ð¾Ð´Ð³ÑÑÐ·ÐºÑ Ð´Ð°Ð½Ð½ÑÑ Ð¸ Ñ.Ð¿.

          // Ð¿ÑÐ¾ÑÑÐ¾ ÑÐ¾Ð¾Ð±ÑÐµÐ½Ð¸Ðµ
          alert("We returned to the page with a link: " + location.href);
        }, false);
      })(window.addEventListener ? ['addEventListener', ''] : ['attachEvent', 'on']);
    </script>
  </head>
  <body>
    <a class="ajax" href="/mylink.html">My Link</a>
    <a class="ajax" href="/otherlink.html">Other Link</a>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="history.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(function() {
        // Ð¿Ð¾Ð»ÑÑÐ°ÐµÐ¼ Ð½Ð¾ÑÐ¼Ð°Ð»ÑÐ½ÑÐ¹ Ð¾Ð±ÑÐµÐºÑ Location

        /*
         * Ð·Ð°Ð¼ÐµÑÑÑÐµ, ÑÑÐ¾ ÐµÐ´Ð¸Ð½ÑÑÐ²ÐµÐ½Ð½Ð°Ñ ÑÐ°Ð·Ð½Ð¸ÑÐ° Ð¿ÑÐ¸ ÑÐ°Ð±Ð¾ÑÐµ Ñ Ð´Ð°Ð½Ð½Ð¾Ð¹ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ¾Ð¹,
         * ÑÐ°Ðº ÐºÐ°Ðº Ð¾Ð±ÑÐµÐºÑ window.location Ð½ÐµÐ»ÑÐ·Ñ Ð¿ÐµÑÐµÐ·Ð°Ð³ÑÑÐ·Ð¸ÑÑ, Ð¿Ð¾ÑÑÐ¾Ð¼Ñ
         * Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ° history Ð²Ð¾Ð·Ð²ÑÐ°ÑÐ°ÐµÑ ÑÑÐ¾ÑÐ¼Ð¸ÑÐ¾Ð²Ð°Ð½Ð½ÑÐ¹ "location" Ð¾Ð±ÑÐµÐºÑ Ð²Ð½ÑÑÑÐ¸
         * Ð¾Ð±ÑÐµÐºÑÐ° window.history, Ð¿Ð¾ÑÑÐ¾Ð¼Ñ Ð¿Ð¾Ð»ÑÑÐ°ÐµÐ¼ ÐµÐ³Ð¾ Ð¸Ð· "history.location".
         * ÐÐ»Ñ Ð±ÑÐ°ÑÐ·ÐµÑÐ¾Ð² Ð¿Ð¾Ð´Ð´ÐµÑÐ¶Ð¸Ð²Ð°ÑÑÐ¸Ñ "history.pushState" Ð¿Ð¾Ð»ÑÑÐ°ÐµÐ¼
         * ÑÑÐ¾ÑÐ¼Ð¸ÑÐ¾Ð²Ð°Ð½Ð½ÑÐ¹ Ð¾Ð±ÑÐµÐºÑ "location" Ñ Ð¾Ð±ÑÑÐ½Ð¾Ð³Ð¾ "window.location".
         */
        var location = window.history.location || window.location;

        // Ð¸ÑÐµÐ¼ Ð²ÑÐµ ÑÑÑÐ»ÐºÐ¸ Ð¸ Ð²ÐµÑÐ°ÐµÐ¼ ÑÐ¾Ð±ÑÑÐ¸Ñ Ð½Ð° Ð²ÑÐµ ÑÑÑÐ»ÐºÐ¸ Ð² Ð½Ð°ÑÐµÐ¼ Ð´Ð¾ÐºÑÐ¼ÐµÐ½ÑÐµ
        $(document).on('click', 'a.ajax', function() {
          // Ð·Ð°Ð½Ð¾ÑÐ¸Ð¼ ÑÑÑÐ»ÐºÑ Ð² Ð¸ÑÑÐ¾ÑÐ¸Ñ
          history.pushState(null, null, this.href);

          // ÑÑÑ Ð¼Ð¾Ð¶ÐµÑÐµ Ð²ÑÐ·Ð²Ð°ÑÑ Ð¿Ð¾Ð´Ð³ÑÑÐ·ÐºÑ Ð´Ð°Ð½Ð½ÑÑ Ð¸ Ñ.Ð¿.

          // Ð½Ðµ Ð´Ð°ÐµÐ¼ Ð²ÑÐ¿Ð¾Ð»Ð½Ð¸ÑÑ Ð´ÐµÐ¹ÑÑÐ²Ð¸Ðµ Ð¿Ð¾ ÑÐ¼Ð¾Ð»ÑÐ°Ð½Ð¸Ñ
          return false;
        });

        // Ð²ÐµÑÐ°ÐµÐ¼ ÑÐ¾Ð±ÑÑÐ¸Ðµ Ð½Ð° popstate ÐºÐ¾ÑÐ¾ÑÐ¾Ðµ ÑÑÐ°Ð±Ð°ÑÑÐ²Ð°ÐµÑ Ð¿ÑÐ¸ Ð½Ð°Ð¶Ð°ÑÐ¸Ð¸ back/forward Ð² Ð±ÑÐ°ÑÐ·ÐµÑÐµ
        $(window).on('popstate', function(e) {

          // ÑÑÑ Ð¼Ð¾Ð¶ÐµÑÐµ Ð²ÑÐ·Ð²Ð°ÑÑ Ð¿Ð¾Ð´Ð³ÑÑÐ·ÐºÑ Ð´Ð°Ð½Ð½ÑÑ Ð¸ Ñ.Ð¿.

          // Ð¿ÑÐ¾ÑÑÐ¾ ÑÐ¾Ð¾Ð±ÑÐµÐ½Ð¸Ðµ
          alert("ÐÑ Ð²ÐµÑÐ½ÑÐ»Ð¸ÑÑ Ð½Ð° ÑÑÑÐ°Ð½Ð¸ÑÑ ÑÐ¾ ÑÑÑÐ»ÐºÐ¾Ð¹: " + location.href);
        });
      });
    </script>
  </head>
  <body>
    <a class="ajax" href="/mylink.html">My Link</a>
    <a class="ajax" href="/otherlink.html">Other Link</a>
  </body>
</html>

history.js?basepath=/pathtosite/ - Ð±Ð°Ð·Ð¾Ð²ÑÐ¹ Ð¿ÑÑÑ Ðº ÑÐ°Ð¹ÑÑ, Ð¿Ð¾ ÑÐ¼Ð¾Ð»ÑÐ°Ð½Ð¸Ñ Ð¸Ð¼ÐµÐµÑ Ð·Ð½Ð°ÑÐµÐ½Ð¸Ðµ ÐºÐ¾ÑÐ½Ñ "/".
history.js?redirect=true - Ð²ÐºÐ»ÑÑÐ¸ÑÑ Ð¿ÑÐµÐ¾Ð±ÑÐ°Ð·Ð¾Ð²Ð°Ð½Ð¸Ðµ ÑÑÑÐ»Ð¾Ðº.
history.js?type=/ - Ð¿Ð¾Ð´ÑÑÐ°Ð²Ð»ÑÑÑ Ð¿Ð¾Ð´ÑÑÑÐ¾ÐºÑ Ð¿Ð¾ÑÐ»Ðµ ÑÐºÐ¾ÑÑ, Ð¿Ð¾ ÑÐ¼Ð¾Ð»ÑÐ°Ð½Ð¸Ñ Ð¸Ð¼ÐµÐµÑ ÑÐ¸Ð¼Ð²Ð¾Ð» "/".

history.js?type=/&redirect=true&basepath=/pathtosite/ - Ð¿Ð¾ÑÑÐ´Ð¾Ðº Ð¾Ð¿ÑÐ¸Ð¹ Ð½Ðµ Ð¸Ð¼ÐµÐµÑ Ð·Ð½Ð°ÑÐµÐ½Ð¸Ðµ.

history.redirect(/* type = */ '/', /* basepath = */ '/pathtosite/');

ÐÐµÐ¼Ð¾-ÑÐ°Ð¹Ñ: http://history.spb-piksel.ru/ Ð¸Ð»Ð¸ http://devote.github.io/demos/history/

Ð¯ Ð² Twitter: https://twitter.com/DimaPakhtinov

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Modernizr

Cons of Modernizr

Code Comparison

Pros of history.js

Cons of history.js

Code Comparison

Pros of history

Cons of history

Code Comparison

Key Differences

Use Cases

Pros of Turbolinks

Cons of Turbolinks

Code Comparison

Key Differences

Use Cases

Pros of html

Cons of html

Code comparison

Summary

Convert designs to code with AI

README

ENGLISH

You may install this plugin with this command:

Browser Support:

For library developers:

AMD Support:

Example of using the library in the pure JS context:

Example of using the library along with JQuery:

Advanced library configuration:

Ð Ð£Ð¡Ð¡ÐÐÐ (Russian)

ÐÑ Ð¼Ð¾Ð¶ÐµÑÐµ ÑÑÑÐ°Ð½Ð¾Ð²Ð¸ÑÑ Ð¿Ð»Ð°Ð³Ð¸Ð½ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÐºÐ¾Ð¼Ð°Ð½Ð´Ñ:

ÐÐ¾Ð´Ð´ÐµÑÐ¶ÐºÐ° Ð±ÑÐ°ÑÐ·ÐµÑÐ¾Ð²:

ÐÐ»Ñ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÑÐ¸ÐºÐ¾Ð² Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐº:

ÐÐ¾Ð´Ð´ÐµÑÐ¶ÐºÐ° AMD:

ÐÐ¾ÑÐ¾ÑÐµÐ½ÑÐºÐ¸Ð¹ Ð¿ÑÐ¸Ð¼ÐµÑ Ð½Ð° ÑÐ¸ÑÑÐ¾Ð¼ JS:

Ð ÑÐµÐ¿ÐµÑÑ Ð¿Ð¾ÐºÐ°Ð·ÑÐ²Ð°Ñ Ð¿ÑÐ¸Ð¼ÐµÑ Ð² ÑÐ²ÑÐ·ÐºÐµ Ñ jQuery:

ÐÑ Ð¼Ð¾Ð¶ÐµÑÐµ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°ÑÑ Ð´Ð¾Ð¿Ð¾Ð»Ð½Ð¸ÑÐµÐ»ÑÐ½ÑÐµ Ð¿Ð°ÑÐ°Ð¼ÐµÑÑÑ ÐºÐ¾Ð½ÑÐ¸Ð³ÑÑÐ°ÑÐ¸Ð¸ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ¸:

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days

Ð Ð£Ð¡Ð¡ÐÐÐ (Russian)

ÐÑ Ð¼Ð¾Ð¶ÐµÑÐµ ÑÑÑÐ°Ð½Ð¾Ð²Ð¸ÑÑ Ð¿Ð»Ð°Ð³Ð¸Ð½ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÐºÐ¾Ð¼Ð°Ð½Ð´Ñ:

ÐÐ¾Ð´Ð´ÐµÑÐ¶ÐºÐ° Ð±ÑÐ°ÑÐ·ÐµÑÐ¾Ð²:

ÐÐ»Ñ ÑÐ°Ð·ÑÐ°Ð±Ð¾ÑÑÐ¸ÐºÐ¾Ð² Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐº:

ÐÐ¾Ð´Ð´ÐµÑÐ¶ÐºÐ° AMD:

ÐÐ¾ÑÐ¾ÑÐµÐ½ÑÐºÐ¸Ð¹ Ð¿ÑÐ¸Ð¼ÐµÑ Ð½Ð° ÑÐ¸ÑÑÐ¾Ð¼ JS:

Ð ÑÐµÐ¿ÐµÑÑ Ð¿Ð¾ÐºÐ°Ð·ÑÐ²Ð°Ñ Ð¿ÑÐ¸Ð¼ÐµÑ Ð² ÑÐ²ÑÐ·ÐºÐµ Ñ jQuery:

ÐÑ Ð¼Ð¾Ð¶ÐµÑÐµ Ð¸ÑÐ¿Ð¾Ð»ÑÐ·Ð¾Ð²Ð°ÑÑ Ð´Ð¾Ð¿Ð¾Ð»Ð½Ð¸ÑÐµÐ»ÑÐ½ÑÐµ Ð¿Ð°ÑÐ°Ð¼ÐµÑÑÑ ÐºÐ¾Ð½ÑÐ¸Ð³ÑÑÐ°ÑÐ¸Ð¸ Ð±Ð¸Ð±Ð»Ð¸Ð¾ÑÐµÐºÐ¸: