使用Javascript:如果没有选项卡或窗口的历史记录,如何创建一个"返回"链接,将用户带到链接？

Question

编辑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因为它包含您在给定会话中总共访问过的页面数量:

window.history.length (整数)

只读.返回会话历史记录中的元素数,包括当前加载的页面.例如,对于在新选项卡中加载的页面,此属性返回1. ^引用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

现在window.history.length是4.由于安全原因,您无法遍历历史记录项.否则可以读取用户的历史记录并获取其在线银行会话ID或其他敏感信息.

您可以设置超时,这将使您能够在给定时间内未加载上一页时执行操作.但是,如果用户的Internet连接速度较慢且超时时间较短,则此方法会将其始终重定向到默认位置:

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"很重要,因为浏览器供应商可以出于安全原因(会话哈希,自定义GET URL)禁用引荐来源.但是如果我们检测到一个推荐者并且它是空的,那么可以省略说没有上一页(见下面的注释).仍然可能会出现一些奇怪的浏览器怪癖,因此使用超时比使用简单的重定向更安全.

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

也可以看看:

• W3C:HTML5:5.4.2历史界面

Answer 2

检查window.history.length或简单地说,history.length

编辑: 一些浏览器以0开始其历史记录,其他浏览器以1.进行相应调整.

如果它的值为1,则表示它是该窗口/选项卡中的第一页 - 然后您可以让JS重定向您.

<script>
    function backAway(){
        //if it was the first page
        if(history.length === 1){
            window.location = "http://www.mysite.com/"
        } else {
            history.back();
        }
    }
</script>

<a href="#" onClick="backAway()">Back</a>

Answer 3

两者都可以相同,它只是两种不同的方法来调用相同的函数.请尝试以下方法:

<a href="javascript:history.back();">[Go Back]</a>

Answer 4

echo "<p><a href=\"javascript:history.go(-1)\" title=\"Return to previous page\">&laquo;Go back</a></p>";

将返回一页.

echo "<p><a href=\"javascript:history.go(-2)\" title=\"Return to previous page\">&laquo;Go back</a></p>";

将返回两页.

Answer 5

return:false;在另一个问题上很好地解释了使用它的原因.

对于另一个问题,您可以检查引荐来源以查看它是否为空:

    function backAway(){
        if (document.referrer == "") { //alternatively, window.history.length == 0
            window.location = "http://www.example.com";
        } else {
            history.back();
        }
    }

<a href="#" onClick="backAway()">Back Button Here.</a>

Answer 6

这似乎可以解决问题：

function goBackOrGoToUrl() {    

    window.history.back();
    window.location = "http://example.com";

}

调用 history.back() 然后更改位置。如果浏览器能够返回历史记录，它将无法进入下一个语句。如果它不能回去，它会去指定的位置。