如何创建一个后退/前进按钮？ [英] How can I create a back/forward button?

问题描述

我想为我的网站设置后退和前进按钮。实际上，我想按照这。首先，我需要检查是否 window.history.back（）; 和 window.history.forward（）; 存在？如果是，然后显示他们的按钮并为他们设置 href 属性。

I'm trying to make both back and forward buttons for my website. Actually I want to follow this. So first of all, I need to check whether do window.history.back(); and window.history.forward(); exist? if yes, then show their buttons and set a href attribute for them.

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

然后，我将使用这样的按钮：

And then, I will use those buttons like this:

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

但是我的代码不能正常工作，我的意思是我甚至不能打开我的网站。它将被重定向到某处而不点击任何东西。如何解决？

But my code doesn't work as expected, I mean I even cannot open my website. It will be redirected somewhere without clicking on anything. How can I fix it?

推荐答案

尝试：

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

这篇关于如何创建一个后退/前进按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！