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

试试这个：

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)

如果可用，则返回true值。

最后，您需要创建一个函数或匿名函数来调用该方法并将其绑定到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 中检测到有可能返回的位置。

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

4 个答案: