Javascript to redirect from #anchor to a separate

2019-04-29 01:27发布

站内问答 / JavaScript
1934 5 5

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.

5条回答
做个烂人
2楼-- · 2019-04-29 01:57

this might help:

<a href="/all_products#A" onclick="return redirectMe(this);">A</a>
<a href="/all_products#B" onclick="return redirectMe(this);">B</a>
<a href="/all_products#C" onclick="return redirectMe(this);">C</a>
<a href="/all_products#D" onclick="return redirectMe(this);">D</a>
<a href="/all_products#E" onclick="return redirectMe(this);">E</a>

<script type="text/javascript">
function redirectMe(a){
   var aa=a+"";
   window.location=aa.replace(/#/g,"/");
}
</script>
查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
3楼-- · 2019-04-29 02:05

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";
}
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
4楼-- · 2019-04-29 02:14

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.

查看更多
0人赞 添加讨论(0) 举报
该账号已被封号
5楼-- · 2019-04-29 02:15

With jquery, either just replace the href with the correct one:

$('a').each(function() {
  this.href = this.href.replace(/all_products#/, 'products/');
});

or capture clicks and redirect:

$('a').click(function() {
  window.location = this.href.replace(/all_products#/, 'products/');
  return false;
});
查看更多
0人赞 添加讨论(0) 举报
干净又极端
6楼-- · 2019-04-29 02:22

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]);
    }
})();
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)