使用JavaScript / jQuery的后退按钮

时间:2015-07-10 18:30:30

标签: javascript jquery

我有两个相同的HTML页面( index.html page1.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>

一个按钮变为第二个页面,第二个按钮就像一个后退按钮。 (理想情况下,您可以使用第一个按钮进入第二页,然后使用第二页上的后退按钮返回第一页。)

我使用JavaScript控制它(这仅适用于 index.html 按钮,但 page1.html JS相同):

$(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();
});

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

6 个答案:

答案 0 :(得分:14)

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

window.history.back();

而不是:

parent.history.back();

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

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

这也会阻止submit button

的默认行为

答案 1 :(得分:1)

你的取消按钮仍然是一个提交按钮,所以它会返回然后提交表格,再向前发送你,并基本上撤消你的后退机动。

使用

return false;

在parent.history.back();

之后

停止继续提交

答案 2 :(得分:0)

这对我来说总是有用的。

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

答案 3 :(得分:0)

使用此:

window.history.back();

答案 4 :(得分:0)

点击时

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

答案 5 :(得分:0)

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

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

});