javascript - 如何创建后退/前进按钮？

Question

我正在尝试为我的网站制作后退和前进按钮。其实我想关注this .所以首先，我需要检查 window.history.back(); 和 window.history.forward(); 是否存在？如果是，则显示它们的按钮并为它们设置一个 href 属性。

function creat_back_forward_btn(){
    if ( window.history.back() ) {
        $('.back_btn').show(); // in first, the button is hidden (by CSS)
        var previous_page = window.history.back();
        $('.back_btn').attr('href', previous_page );   
    } 

    if ( window.history.forward() ) {
        $('.forward_btn').show(); // in first, the button is hidden (by CSS)
        var next_page = window.history.forward();
        $('.forward_btn').attr('href', next_page );    
    } 
}

creat_back_forward_btn();  // on load

然后，我将像这样使用这些按钮:

$('.back_btn, .forward_btn').on('click', function() {
    var page = $(this).attr('href');
    location.href=page
});

但是我的代码没有按预期工作，我的意思是我什至无法打开我的网站。它将被重定向到某个地方而无需单击任何内容。我该如何解决？

Answer 1

要检查函数是否存在，您正在使用:

if (window.history.back())

这将执行该方法。您应该改用:

if (window.history.back)

如果可用则返回真值。

最后，您需要创建调用该方法的函数或匿名函数并将其绑定(bind)到 href 属性，而不是执行该方法并将返回值分配给变量。像这样:

var previous_page = function () { window.history.back() };
$('.back_btn').attr('href', previous_page );