Menu
I have a set of links with #anchors pointing to a single webpage and I would like to smoothly move to a model with a separate webpage for each of those links. I want the old links to keep working using a redirect.
Old link style:
/all_products#A
/all_products#B
/all_products#C
New link style:
/products/A
/products/B
/products/C
I know that the server does not receive the #anchor name in the request but Javascript might.
Is it possible to automatically redirect from /all_products#A to /products/A using Javascript?
JQuery would be fine, it's being used on the site anyway.
429
You can redirect a web page via JavaScript using a number of methods. We will quickly list them and conclude with the recommended one. In JavaScript, window. location or simply location object is used to get information about the location of the current web page (document) and also to modify it.
Summary. To redirect to a new URL or page, you assign the new URL to the location. href property or use the location. assign() method.
Add a new URL redirectClick the URL Redirects tab. In the upper right, click Add URL redirect. In the right panel, select the Standard or Flexible redirect type. A standard redirect is used to redirect one URL to another.
I added this new answer to include some best practices for both extracting the hash from the url and doing a redirect.
// Closure-wrapped for security.
(function () {
var anchorMap = {
"A": "/products/A",
"B": "/products/B",
"C": "/products/C"
}
/*
* Best practice for extracting hashes:
* https://stackoverflow.com/a/10076097/151365
*/
var hash = window.location.hash.substring(1);
if (hash) {
/*
* Best practice for javascript redirects:
* https://stackoverflow.com/a/506004/151365
*/
window.location.replace(anchorMap[hash]);
}
})();
Put this as close to the top of your HTML <head> as you can so that it can execute before the rest of the page resources download:
<script>
function checkURL() {
var old_path = '/all_products';
if (window.location.pathname != old_path) {
// Not on an old-style URL
return false;
}
// Some browsers include the hash character in the anchor, strip it out
var product = window.location.hash.replace(/^#(.*)/, '$1');
// Redirect to the new-style URL
var new_path = '/products';
window.location = new_path + '/' + product;
}
checkURL();
</script>
This will check the current page URL and redirect if it matches the old-style path.
This code makes use of the window.location object which contains all the parts of the current URL already split up into component parts.
Making this script more generic is left as an exercise for the implementer.
28
I hope this can help :)
var urlSplit = document.URL.split("#");
if (urlSplit[1]) {
location.href = "http://www.example.org" + "/" + urlSplit[1];
}
else {
location.href = "http://www.example.org";
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
