javascript - 使用 Javascript : How to create a 'Go Back' link that takes the user to a link if there's no history for the tab or window?

Question

EDIT-2:所有答案似乎都不起作用。甚至我之前标记为该问题答案的那个也没有。任何帮助表示赞赏。谢谢。

首先，我在谷歌上搜索了如何创建允许用户返回到上一页的“返回”链接，有两种方法可以做到这一点:

<a href="javascript:history.go(-1)">[Go Back]</a>

和...

<a href="#" onclick="history.go(-1);return false;">[Go Back]</a>

这两个选择哪个更好？为什么？ (另外，请说明浏览器兼容性。)

这是问题的一半。现在，如果我的是用户访问的第一个页面，“返回”链接将不起作用，对吗？ (因为窗口或选项卡没有预先存在的历史记录。)在这种情况下，我希望链接回退并将用户带到 http://example.com。 .

即如果历史存在，用户将被带到上一页，如果不存在，他将被带到http://example.com。 .

我该怎么做？希望有人能帮忙。

编辑:请注意，我不懂 JavaScript，所以请解释一下您的回答。谢谢。

Answer 1

您无法检查 window.history.length因为它包含您在给定 session 中访问的页面总数:

window.history.length (Integer)

Read-only. Returns the number of elements in the session history, including the currently loaded page. For example, for a page loaded in a new tab this property returns 1. ^{Cite 1}

假设用户访问您的页面，点击一些链接然后返回:

www.mysite.com/index.html <-- first page and now current page                  <----+
www.mysite.com/about.html                                                           |
www.mysite.com/about.html#privacy                                                   | 
www.mysite.com/terms.html <-- user uses backbutton or your provided solution to go back

Now window.history.length is 4. You cannot traverse through the history items due to security reasons. Otherwise on could could read the user's history and get his online banking session id or other sensitive information.

You can set a timeout, that will enable you to act if the previous page isn't loaded in a given time. However, if the user has a slow Internet connection and the timeout is to short, this method will redirect him to your default location all the time:

window.goBack = function (e){
    var defaultLocation = "http://www.mysite.com";
    var oldHash = window.location.hash;

    history.back(); // Try to go back

    var newHash = window.location.hash;

    /* If the previous page hasn't been loaded in a given time (in this case
    * 1000ms) the user is redirected to the default location given above.
    * This enables you to redirect the user to another page.
    *
    * However, you should check whether there was a referrer to the current
    * site. This is a good indicator for a previous entry in the history
    * session.
    *
    * Also you should check whether the old location differs only in the hash,
    * e.g. /index.html#top --> /index.html# shouldn't redirect to the default
    * location.
    */

    if(
        newHash === oldHash &&
        (typeof(document.referrer) !== "string" || document.referrer  === "")
    ){
        window.setTimeout(function(){
            // redirect to default location
            window.location.href = defaultLocation;
        },1000); // set timeout in ms
    }
    if(e){
        if(e.preventDefault)
            e.preventDefault();
        if(e.preventPropagation)
            e.preventPropagation();
    }
    return false; // stop event propagation and browser default event
}

<span class="goback" onclick="goBack();">Go back!</span>

请注意 typeof(document.referrer) !== "string"很重要，因为浏览器 vendor 可以出于安全原因( session 哈希、自定义 GET URL)禁用引荐来源网址。但是，如果我们检测到引荐来源网址并且它是空的，则可能会说没有上一页(请参阅下面的注释)。仍然可能存在一些奇怪的浏览器怪癖，因此使用超时比使用简单的重定向更安全。

编辑:不要使用 <a href='#'>...</a> ，因为这会在 session 历史记录中添加另一个条目。最好使用 <span>或其他一些元素。注意 typeof document.referrer总是 "string"如果您的页面位于 (i) 框架内，则不为空。

另见:

• W3C: HTML5: 5.4.2 The History interface