使用JavaScript/jQuery的后退按钮

Question

我有两个相同的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();因为我在控制台中设置了断点,但除此之外我不知道为什么它不会返回到第一页.

Answer 1

history是来自windowobject 的属性,而不是来自html元素的属性.所以,这应该工作:

window.history.back();

代替:

parent.history.back();

最后你应该有这样的事情:

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

这也会阻止你的默认行为 submit button