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

Question

我正在尝试为我的网站设置后退和前进按钮。 其实我想遵循这个 。 因此，首先，我需要检查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

尝试这个：

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

Answer 2

要检查该功能是否存在，请使用：

if (window.history.back())

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

if (window.history.back)

如果可用，则返回一个真值。

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

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

Answer 3

试试这个

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 4

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

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

但是，这只会告诉您该功能是否存在，而不会告诉您浏览器历史记录中是否包含该功能。 实际上，您无法检查浏览器历史记录中有多少条记录，因为这是一个安全问题。 您可以将事件popstate与方法pushState和replaceState一起处理以对历史记录做出反应。 但是，如果您想象这样的情况：打开带有页面A的浏览器窗口，而不是导航到页面B ，则浏览器历史记录中将有一条记录，您将能够使用浏览器按钮导航回A ，但是将无法在您的页面B中检测到有可以退回的地方。