Handle URL Hash Change In jQuery - JQueryHash

A tiny jQuery plugin for handling the Hash(#) in your URL and triggering a callback function when the URL Hash (fragment identifier of the URL) has changed.

How to use it:

1. Download and put the jquery.jqueryhash.js script after loading the latest jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.jqueryhash.js"></script>

2. Trigger a callback function when the URL hash has changed.

<a href="#jquery" id="jquery">jQuery Hash</a>
<a href="#script" id="script">Script Hash</a>

$.onHash({
  hashes: [
    ['jquery', function() { console.log('Hash Changed: jquery'); }],
    ['script', function() { console.log('Hash Changed: script'); }]
  ]
});

3. Determine whether to trigger the callback only on page load. Default: false.

$.onHash({
  hashes: [
    ['jquery', function() { console.log('Hash Changed: jquery'); }],
    ['script', function() { console.log('Hash Changed: script'); }]
  ],
  onlyOnLoad: true
});

4. Add a new handler to a hash.

$.onHash('onAddHandler', ['new', function() { 
  // do something
}]);

5. Update the handler.

$.onHash('onUpdateOne', ['new', function() { 
  // do something
}]);

6. Remove the callback of a hash.

$.onHash('onRemoveOneHandler', 'jquery');

7. Remove all callbacks.

$.onHash('onRemoveHashChange');

Changelog:

2024-09-16

• Replaced var with let and const.
• Removed future removed functions in jQuery 4.

---

This awesome jQuery plugin is developed by MiguelFernandez008. For more Advanced Usages, please check the demo page or visit the official website.