带有 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
Back button with JavaScript/jQuery
提问by user3413170
I have two identical HTML pages (index.htmland page1.html) that contain two buttons:
我有两个相同的 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>
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
history
is a property from window
object 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;
});
});
});