带有 JavaScript/jQuery 的后退按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31347882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 13:41:02  来源:igfitidea点击:

Back button with JavaScript/jQuery

javascriptjquery

提问by user3413170

I have two identical HTML pages (index.htmland page1.html) that contain two buttons:

我有两个相同的 HTML 页面(index.htmlpage1.html),其中包含两个按钮:

<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <li class="ui-body ui-body-b ui-li-static ui-body-inherit ui-last-child">
        <fieldset class="ui-grid-a">
            <div class="ui-block-a">
                <button id="submit" type="submit" class="ui-btn ui-btn-a ui-corner-all">Submit</button>
            </div>
            <div class="ui-block-b">
                <button id="cancel" data-direction="reverse" type="submit" class="ui-btn ui-btn-a ui-corner-all">Cancel</button>
            </div>
        </fieldset>
    </li>
</ul>

Where one button changes to the second page, and the second button acts like a back button. (Ideally, you can use the first button to get to the second page, and then use the back button on the second page to get back to the first.)

其中一个按钮更改为第二页,第二个按钮的作用类似于后退按钮。(理想情况下,您可以使用第一个按钮进入第二页,然后使用第二页上的后退按钮返回第一页。)

I control this using JavaScript (this only pertains to the index.htmlbuttons, but the page1.htmlJS is identical):

我使用 JavaScript 控制它(这只与index.html按钮有关,但page1.htmlJS 是相同的):

$(document).on('click', '#submit', function() {
    $(":mobile-pagecontainer").pagecontainer("change", "page1.html",  {
        transition: 'slide',       
        changeHash: true
    });
});

$(document).on('click', '#cancel', function() {
    parent.history.back();
    //$.mobile.back();
});

But nothing I try seems to work. I know that the program reaches the parent.history.back();because I've set break points in the console, but other than that I have no idea why it will not return to the first page.

但我尝试的一切似乎都不起作用。我知道程序到达了,parent.history.back();因为我在控制台中设置了断点,但除此之外我不知道为什么它不会返回到第一页。

回答by leo.fcx

historyis a property from windowobject and not from an html element. So, this should work:

history是来自window对象而不是来自 html 元素的属性。所以,这应该有效:

window.history.back();

instead of:

代替:

parent.history.back();

At the end you should have something like this:

最后你应该有这样的东西:

$('button#cancel').on('click', function(e){
    e.preventDefault();
    window.history.back();
});

This is going to also prevent the default behavior of your submit button

这也将阻止您的默认行为 submit button

回答by Darren H

Your cancel button is still a submit button, so it's going back thensubmitting the form, sending you forwards again and essentially undoing your back maneuver.

您的取消按钮仍然是一个提交按钮,因此它会返回然后提交表单,再次向您发送并基本上撤消您的返回操作。

Use

利用

return false;

after the parent.history.back();

在 parent.history.back() 之后;

to stop the submission from continuing

停止提交继续

回答by Robert Araujo

This always worked for me to go back.

这对我回去总是有用的。

<a href="javascript:history.back()">BACK</a> 

回答by Hamid Parchami

Use this:

用这个:

window.history.back();

回答by Rohallah Hatami

whith onclick

与点击

 <a onclick="window.history.back();" class="btn btn-sm btn-info">back</a>

回答by Serkan Hürsgünel

This code snippet to simulate a back button based on the users last page

此代码段根据用户的最后一页模拟后退按钮

$(document).ready(function(){
$('a.back').click(function(){
    parent.history.back();
    return false;
});

});

});