Last active
December 12, 2015 04:58
-
-
Save devote/4717631 to your computer and use it in GitHub Desktop.
The plugin includes support for older non-HTML5 browsers for the library: https://github.com/visionmedia/page.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Basic</title> | |
| <script src="/history.js"></script> | |
| <script src="/page.js"></script> | |
| <script src="/history-plugin.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| if (!window.history.replaceState) { | |
| alert('missing replaceState'); | |
| } | |
| </script> | |
| <h1>Basic</h1> | |
| <p></p> | |
| <ul> | |
| <li><a href="./">/</a></li> | |
| <li><a href="#whoop">#whoop</a></li> | |
| <li><a href="./about">/about</a></li> | |
| <li><a href="./contact">/contact</a></li> | |
| <li><a href="./not-found?foo=bar">/not-found</a></li> | |
| </ul> | |
| <script> | |
| // the "notfound" implements a catch-all | |
| // with page('*', notfound). Here we have | |
| // no catch-all, so page.js will redirect | |
| // to the location of paths which do not | |
| // match any of the following routes | |
| page.base('/basic'); | |
| page('/', index); | |
| page('/about', about); | |
| page('/contact', contact); | |
| page('*', notfound); | |
| page(); | |
| function index() { | |
| document.getElementsByTagName('p')[0] | |
| .innerHTML = 'viewing index'; // IE unsupport textContent | |
| } | |
| function about() { | |
| document.getElementsByTagName('p')[0] | |
| .innerHTML = 'viewing about'; | |
| } | |
| function contact() { | |
| document.getElementsByTagName('p')[0] | |
| .innerHTML = 'viewing contact'; | |
| } | |
| function notfound() { | |
| document.getElementsByTagName('p')[0] | |
| .innerHTML = 'not found'; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * The plugin includes support for older non-HTML5 browsers for the library: https://github.com/visionmedia/page.js | |
| * | |
| * Documentation: | |
| * Connect on your site library: https://github.com/devote/HTML5-History-API | |
| * Next, connect the library: https://github.com/visionmedia/page.js | |
| * After them, connect this the plugin. | |
| * | |
| * Good luck! | |
| * | |
| * Copyright 2013, Dmitriy Pakhtinov ( spb.piksel@gmail.com ) | |
| * | |
| * Dual licensed under the MIT and GPL licenses: | |
| * http://www.opensource.org/licenses/mit-license.php | |
| * http://www.gnu.org/licenses/gpl.html | |
| * | |
| * Update: 06-02-2013 | |
| */ | |
| (function(window, undefined) { | |
| // get the version IE | |
| var msie = +(((window.eval && eval("/*@cc_on 1;@*/") && /msie (\d+)/i.exec(navigator.userAgent)) || [])[1] || 0), | |
| pageStart = page.start, | |
| pageStop = page.stop, | |
| pageDispatch = page.dispatch, | |
| pageReplace = page.replace, | |
| pageBase = page.base, | |
| // overload 'page.dispatch' method had because of this line | |
| location = history.location || window.location; | |
| // IE incorrectly generates property '.pathname' in links | |
| if (msie && (msie === 8 || msie === 9)) { | |
| // fix for this | |
| var descriptor = Object.getOwnPropertyDescriptor(HTMLAnchorElement.prototype, 'pathname'); | |
| Object.defineProperty(HTMLAnchorElement.prototype, "pathname", { | |
| get: function() { | |
| var pathname = descriptor.get.call(this); | |
| return pathname.indexOf( "/" ) === 0 ? pathname : "/" + pathname; | |
| }, | |
| set: descriptor.set | |
| }); | |
| } | |
| page.base = function() { | |
| if (arguments.length) { | |
| history.redirect(undefined, arguments[0].replace(/\/?$/, '/')); | |
| } | |
| pageBase.apply(page, arguments); | |
| } | |
| page.start = function(options) { | |
| // temporarily replace method | |
| page.replace = pReplace; | |
| // check the availability of the event model w3c | |
| if (!window.addEventListener) { | |
| // temporarily add a method | |
| window.addEventListener = function(type, callback) { | |
| var context = type === 'click' ? document : window; | |
| context.attachEvent("on" + type, callback.proxy = function(e){ | |
| var event = e || window.event; | |
| event.defaultPrevented = event.returnValue === false; | |
| var el = event.target = event.srcElement; | |
| while (el && 'A' != el.nodeName) el = el.parentNode; | |
| if (el && 'A' == el.nodeName) { | |
| // emulate event object for work in IE7 | |
| event = { | |
| which: 1, | |
| target: { | |
| nodeName: 'A', | |
| href: el.href, | |
| pathname: el.pathname.indexOf('/') === 0 ? el.pathname : '/' + el.pathname, | |
| search: el.search, | |
| hash: el.hash, | |
| getAttribute: function() {return el.getAttribute('href')} | |
| }, | |
| preventDefault: function() {window.event.returnValue = false;} | |
| } | |
| } | |
| callback.call(window, event); | |
| }); | |
| } | |
| pageStart.apply(page, arguments); | |
| window.addEventListener = undefined; | |
| } else { | |
| pageStart.apply(page, arguments); | |
| } | |
| page.replace = pageReplace; | |
| } | |
| page.stop = function() { | |
| // check the availability of the event model w3c | |
| if (!window.removeEventListener) { | |
| // temporarily add a method | |
| window.removeEventListener = function(type, callback) { | |
| var context = type === 'click' ? document : window; | |
| context.detachEvent("on" + type, callback.proxy); | |
| delete callback.proxy; | |
| } | |
| pageStop.apply(page, arguments); | |
| window.addEventListener = undefined; | |
| } else { | |
| pageStop.apply(page, arguments); | |
| } | |
| } | |
| page.dispatch = function(ctx) { | |
| var i = 0; | |
| function next() { | |
| var fn = page.callbacks[i++]; | |
| if (!fn) return unhandled(ctx); | |
| fn(ctx, next); | |
| } | |
| next(); | |
| } | |
| function unhandled(ctx) { | |
| if (location.pathname + location.search == ctx.canonicalPath) return; | |
| page.stop(); | |
| ctx.unhandled = true; | |
| window.location = ctx.canonicalPath; | |
| } | |
| function pReplace() { | |
| arguments[0] = location.pathname + location.search; | |
| return pageReplace.apply(page, arguments); | |
| } | |
| })(window); |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If your browser go to the address:
http://localhost:3000/history.jsyou see the contents of the filehistory.js? If so, check whatContent-Typethe server sends along with the files. Because IE9 does not like badContent-Type, for him to sendContent-Type: application/javascriptfor JavaScript file(s)