Javascript从#anchor重定向到单独的页面

时间:2009-08-20 10:20:58

标签: javascript redirect anchor

我有一组指向单个网页的#anchors链接,我希望能够顺利地转移到每个链接都有单独网页的模型。我希望旧链接继续使用重定向。

旧链接样式:

/all_products#A
/all_products#B
/all_products#C

新链接样式:

/products/A
/products/B
/products/C

我知道服务器在请求中没有收到#anchor名称,但Javascript可能会。

是否可以使用Javascript从/ all_products#A自动重定向到/ products / A?

JQuery没问题,无论如何都在网站上使用。

5 个答案:

答案 0 :(得分:11)

我添加了这个新答案,为extracting the hash from the urldoing 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]);
    }
})();

答案 1 :(得分:3)

尽可能将其放在HTML <head>的顶部,以便在其余的页面资源下载之前执行:

<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>

这将检查当前页面URL并重定向是否与旧式路径匹配。

此代码使用window.location对象,该对象包含已拆分为组件部分的当前URL的所有部分。

使这个脚本更通用是留给实施者的练习。

答案 2 :(得分:2)

我希望这有助于:)

var urlSplit = document.URL.split("#");
if (urlSplit[1]) {
    location.href = "http://www.example.org" + "/" + urlSplit[1];
}
else {
    location.href = "http://www.example.org";
}

答案 3 :(得分:0)

使用jquery,只需用正确的href替换href:

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

或捕获点击次数并重定向:

$('a').click(function() {
  window.location = this.href.replace(/all_products#/, 'products/');
  return false;
});

答案 4 :(得分:-1)

这可能会有所帮助:

<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>