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).
npm install html5-history-apihistory.js - IE8+ and other browsers
history.ielte7.js - IE6+ and other browsers
To enable support for HTML5-History-API polyfill in your library, you need to add one line of code:
varlocation=window.history.location||window.location;code of library looks like this:
(function(){// To enable support for HTML5-History-API polyfill in your libraryvarlocation=window.history.location||window.location;// you library code here// ....// ....// ....})();<!DOCTYPE html><html><head><scripttype="text/javascript" src="/require.js"></script><scripttype="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><!DOCTYPE html><html><head><scripttype="text/javascript" src="history.js"></script><scripttype="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". */varlocation=window.history.location||window.location;// hang on the event, all references in this documentdocument[eventInfo[0]](eventInfo[1]+'click',function(event){event=event||window.event;vartarget=event.target||event.srcElement;// looking for all the links with 'ajax' class foundif(target&&target.nodeName==='A'&&(' '+target.className+' ').indexOf(' ajax ')>=0){// keep the link in the browser historyhistory.pushState(null,null,target.href);// here can cause data loading, etc.// do not give a default actionif(event.preventDefault){event.preventDefault();}else{event.returnValue=false;}}},false);// hang on popstate event triggered by pressing back/forward in browserwindow[eventInfo[0]](eventInfo[1]+'popstate',function(event){// here can cause data loading, etc.// just postalert("We returned to the page with a link: "+location.href);},false);})(window.addEventListener ? ['addEventListener',''] : ['attachEvent','on']);</script></head><body><aclass="ajax" href="/mylink.html">My Link</a><aclass="ajax" href="/otherlink.html">Other Link</a></body></html><!DOCTYPE html><html><head><scripttype="text/javascript" src="history.js"></script><scripttype="text/javascript" src="jquery.js"></script><scripttype="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". */varlocation=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 historyhistory.pushState(null,null,this.href);// here can cause data loading, etc.// do not give a default actionreturnfalse;});// hang on popstate event triggered by pressing back/forward in browser$(window).on('popstate',function(e){// here can cause data loading, etc.// just postalert("We returned to the page with a link: "+location.href);});});</script></head><body><aclass="ajax" href="/mylink.html">My Link</a><aclass="ajax" href="/otherlink.html">Other Link</a></body></html>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
Библиотека эмулирует HTML5 History API в старых браузерах.
Библиотека, которая не добавляет ненужные методы, заставляя их изучать, а оперирует по спецификации w3c, по интерфейсу History.
Для примера могу привести короткий код как с ней работать.
По принципу мы работаем с HTML5 History API так как описано, например, тут http://htmlbook.ru/html5/history или по спецификации http://www.w3.org/TR/html5/history.html#the-history-interface
npm install html5-history-apihistory.js - IE8+ и другие браузеры
history.ielte7.js - IE6+ и другие браузеры
Для включения поддержки плагина HTML5-History-API polyfill в своих библиотеках, добавьте строку кода:
varlocation=window.history.location||window.location;код будет выглядеть примерно так:
(function(){// Включает поддержку плагина HTML5-History-API polyfillvarlocation=window.history.location||window.location;// код вашей библиотеки// ....// ....// ....})();<!DOCTYPE html><html><head><scripttype="text/javascript" src="/require.js"></script><scripttype="text/javascript">requirejs(['/history'],function(){if(history.emulate){console.log('В вашем браузере эмулируется HTML5-History-API');}else{console.log('В вашем браузере есть поддержка HTML5-History-API');}});</script></head><body></body></html><!DOCTYPE html><html><head><scripttype="text/javascript" src="history.js"></script><scripttype="text/javascript">(function(eventInfo){// получаем нормальный объект Location/* * заметьте, это единственная разница при работе с данной библиотекой, * так как объект window.location нельзя перезагрузить, поэтому * библиотека history возвращает сформированный "location" объект внутри * объекта window.history, поэтому получаем его из "history.location". * Для браузеров поддерживающих "history.pushState" получаем * сформированный объект "location" с обычного "window.location". */varlocation=window.history.location||window.location;// вешаем события на все ссылки в нашем документеdocument[eventInfo[0]](eventInfo[1]+'click',function(event){event=event||window.event;vartarget=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><aclass="ajax" href="/mylink.html">My Link</a><aclass="ajax" href="/otherlink.html">Other Link</a></body></html><!DOCTYPE html><html><head><scripttype="text/javascript" src="history.js"></script><scripttype="text/javascript" src="jquery.js"></script><scripttype="text/javascript">$(function(){// получаем нормальный объект Location/* * заметьте, это единственная разница при работе с данной библиотекой, * так как объект window.location нельзя перезагрузить, поэтому * библиотека history возвращает сформированный "location" объект внутри * объекта window.history, поэтому получаем его из "history.location". * Для браузеров поддерживающих "history.pushState" получаем * сформированный объект "location" с обычного "window.location". */varlocation=window.history.location||window.location;// ищем все ссылки и вешаем события на все ссылки в нашем документе$(document).on('click','a.ajax',function(){// заносим ссылку в историюhistory.pushState(null,null,this.href);// тут можете вызвать подгрузку данных и т.п.// не даем выполнить действие по умолчаниюreturnfalse;});// вешаем событие на popstate которое срабатывает при нажатии back/forward в браузере$(window).on('popstate',function(e){// тут можете вызвать подгрузку данных и т.п.// просто сообщениеalert("Мы вернулись на страницу со ссылкой: "+location.href);});});</script></head><body><aclass="ajax" href="/mylink.html">My Link</a><aclass="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/ - порядок опций не имеет значение.
Или выполнить специальный метод в JavaScript:
history.redirect(/* type = */'/',/* basepath = */'/pathtosite/');Демо-сайт: http://history.spb-piksel.ru/ или http://devote.github.io/demos/history/
Я в Twitter: https://twitter.com/DimaPakhtinov