javascript - 使用 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 是 window 对象的属性，而不是 html 元素的属性。所以，这应该有效:

window.history.back();

代替:

parent.history.back();

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

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

这也将阻止您的提交按钮的默认行为