Javascript 后退按钮在jquery mobile中不起作用
您好,我有两个html文件index.html和test.html,在这两个文件中,我添加了后退按钮作为Javascript 后退按钮在jquery mobile中不起作用,javascript,jquery,jquery-ui,jquery-mobile,cordova,Javascript,Jquery,Jquery Ui,Jquery Mobile,Cordova,您好,我有两个html文件index.html和test.html,在这两个文件中,我添加了后退按钮作为data rel=“back”当我从一个索引转到另一个测试时,然后在test.html上,当我单击后退按钮时,它不会导航到index.html。我的索引文件如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" conten
data rel=“back”
当我从一个索引转到另一个测试时,然后在test.html上,当我单击后退按钮时,它不会导航到index.html。我的索引文件如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<div id="searchpage" data-role="page" data-theme="b" data-role="content" data-add-back-btn="true">
<div data-role="header" align="center">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
<h1>index page</h1>
<a href="MainMenu.html" data-icon="grid">Menu</a>
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br" >
<input type="text" name="stock" id="enterstock" value="" />
<input type="submit" id = "verify" data-role="button">
</div>
<script type="text/javascript">
$("#verify").click(function (e)
{
e.stopImmediatePropagation();
e.preventDefault();
window.location = "Test.html";
//$.mobile.changePage('Test.html')
});
</script>
</div>
</body>
</html>
索引页
$(“#验证”)。单击(函数(e)
{
e、 停止即时复制();
e、 预防默认值();
window.location=“Test.html”;
//$.mobile.changePage('Test.html')
});
我的test.html如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div id="cash" data-role="page" data-theme="a" data-role="content" data-add-back-btn="true">
<div data-role="header" align="center">
<a href="#" data-rel="back" data-icon="arrow-l">Back</a>
<h1>Test page</h1>
<a href="MainMenu.html" data-icon="grid">Menu</a>
</div>
<h1>Testing</h1>
</div>
</body>
</html>
测试页
测试
如果我使用$.mobile.changePage('Test.html')
,则返回按钮可以正常工作,但与window.location=“Test.html”配合使用代码>它不工作。为什么会这样?在blackberry5中,更改页面不可用,因此我无法使用它。如有任何建议,将不胜感激。提前感谢data rel=“Back”可用于基于单个html页面的导航堆栈构建
将页面添加到同一html文件中。它根据需要应用页面增强。即使两个页面在同一个html中,第二个页面也不会加载到dom,直到您更改到该页面
我猜当你尝试玩两个htmls时,dom不应该这样做。不是吗
将两个页面放在同一个html上。这就是他们推荐的你想要依靠内置导航系统的方式
您的页面格式也不正确。首先遵循一个好的教程。如前所述,data rel=“back”用于单个HTML页面中的页面
但是,您可以尝试使用history.back()函数。这应该模拟浏览器上的“后退”按钮,因此如果这是您正在寻找的行为,那么它应该可以工作。试试看 在单击事件中使用以下代码
window.history.back()
谢谢你的回复,实际上我有很多页面,所以我不能在同一个页面中添加它们。有没有其他不使用ajax导航到后面的解决方案?