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

【问题标题】：Javascript to redirect from #anchor to a separate pageJavascript 从 #anchor 重定向到单独的页面
【发布时间】：2010-11-21 06:29:44
【问题描述】：

我有一组带有#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 没问题，反正网站上正在使用它。

【问题讨论】：

标签： javascript redirect anchor

【解决方案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>

【讨论】：

Downvote 不是来自我，但这不是我需要的。作为 kkyy 的回答，这仅适用于我自己网站上的链接，我可以随时更改为新架构。我需要重定向保存在我无法控制的其他网站上的链接。

【解决方案2】：

使用 jquery，只需将 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;
});

【讨论】：

但这仅适用于我网站上的链接。不适用于其他网站的现有链接。对吗？

【解决方案3】：

我希望这可以帮助:)

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

【讨论】：

请注意：在 ie8 目录的“默认”页面中使用它会出现问题：它会丢失哈希值。
您应该首选this method to extract the hash 和this method to redirect 以避免链接文章中所述的问题。我添加了an updated answer including these best practices below。

【解决方案4】：

将其尽可能靠近 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 的所有部分，这些部分已被拆分为组件部分。

让这个脚本更通用留给实施者练习。

【讨论】：

【解决方案5】：

我添加了这个新答案以包含extracting the hash from the url 和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]);
    }
})();

【讨论】：