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

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)

如果可用则返回真值。

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

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

Answer 2

试试这样的

if ( window.history.back() ) {
    $('.back_btn').show(); // in first, the button is hidden (by CSS)
    var previous_page = window.history.back(-1);
    $('.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(+1);
    $('.forward_btn').attr('href', next_page );    
} 
}

creat_back_forward_btn();  // on load

Answer 3

您的代码存在几个问题。第一个是，您检查是否存在函数window.history.back() 的方式将导致该函数的执行，因此浏览器会立即返回历史记录。要检查功能是否存在，您可以使用以下代码：

typeof(window.history.back) === "function"

但是，这只会告诉函数是否存在，而不是浏览器历史记录中是否存在某些内容。实际上，您无法检查浏览器历史记录中有多少条记录，因为这是一个安全问题。您可以将事件popstate 与pushState 和replaceState 方法一起处理以对历史更改做出反应。但是，如果您想象一下您打开浏览器窗口的某个页面 A，而不是导航到您的页面 B，浏览器历史记录中将会有一条记录，而您将能够使用浏览器按钮导航回 A，但您将无法在页面 B 中检测到有可以返回的位置。

Answer 4

试试这个：

function creat_back_forward_btn(){
    if ( window.history.length > 0 ) {
        $('.back_btn').show().on("click", function(){
            window.history.back();
        }); 

        $('.forward_btn').show().on("click", function(){
            window.history.forward();
        });
    } 
}

creat_back_forward_btn();  // on load