Question

我正在努力为用户提供聪明和体贴，但我再一次遇到了“设计”问题。

我在网站上有很多页面，我选择删除默认导航并用简单的“后退”按钮替换它。

后退按钮的功能如下：

href="javascript:history.back()"

我也对这些页面进行了“无索引”，所以理论上一切都很好。

然而，我还有一个问题 - 它可能永远不会发生，但知道如何解决它会很好。

假设用户为该页面添加书签。目前还没有回头路，所以我想知道是否有可能创建一个默认的href="/"但是如果有历史记录则以某种方式覆盖它。事实上，如果能够确定是否存在任何历史记录，修改JavaScript函数就足够了。

这可能吗？我不是JS大师，所以我可能想要实现一些无法实现的东西。

Answer 1

将href设置为特定网址，如果存在历史记录，则使用javascript覆盖此行为。

<a id="backbtn" href="/specific/url">Back</a>

document.getElementById("backbtn").addEventListener("click", function(){
    if (history.length){
        history.back();
        return false;
    }
});

http://jsfiddle.net/d1gz8ue9/8/

这样你的链接在没有javascript的情况下仍然有效，可以在新窗口中打开。

Answer 2

嗯，你总是可以尝试“坏”。如果历史是空的，在一些人的眼中练习，用你自己的人来覆盖本地功能。如果您的代码依赖于实现history.back的自动生成的代码，那就快速而又脏。

＆＃13;

if(!history.length) {
  history.back = function(){location.href='mydefaultpage';};
  }

＆＃13;

但如果我是你，我只需制作我自己的个性化后退功能，检查历史长度，就像curt在答案中所显示的那样。

另外，对于你的后退按钮，我会放弃

href="javascript:history.back()"

并将其替换为

href="#" onclick="!history.length?location.href='foobar.html':history.back()"

或在函数中定义

<a href="#" class="back-button">

(function(){ 
    var leave = function() {
        !history.length ? location.href='foobar.html' : history.back();
    };
    var arr = document.getElementsByClassName('back-button');
    for(var i=0;i<arr.length;++i) {
            arr[i].addEventListener('click',leave);
        }
    }
})();

Answer 3

我知道这是一个老问题，但我最近不得不解决这个问题，并且需要它与打开器链接中使用 _blank 目标打开的窗口一起工作（在这种情况下，history.length 已经是 1 而不是 0），并且我想出了这个：

if (history.length > 1) {
  if (history.back() === undefined) {
    history.pushState({}, '', defaultRouteUrl);
  }
} else {
  history.pushState({}, '', defaultRouteUrl);
}

基本上，如果有历史记录，它会尝试返回，但如果出现问题，则导航到 defaultRouteUrl

更多信息请参考：https://developer.mozilla.org/en-US/docs/Web/API/History

history.back（） - 如果没有历史记录，如何设置默认值

3 个答案: