我使用chrome浏览器。 我用这一行：
<td><a href = '/'; >Home</a></td>
返回主页。
例如：
如果我在地址栏中有此网址：
http://localhost:1234/#reportPage
按Home后，我在地址栏中显示此网址：
reportPage是具有data-role =＆＃34; page＆＃34;的div的ID。
地址栏已更改但视图未更改（旧视图保留在同一位置，HTML页面视图不会更改）。
但是如果使用FF或IE浏览器它可以完美地工作，当我按下Home按钮时，地址栏会发生变化，并且视图也会变为主页。知道为什么我在google chrome中遇到上述代码有问题吗？
这是我的HTML代码：
<!DOCTYPE html>
<html ng-app="muni">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
<title>Review</title>
<link href="css/ol.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/themes/rtl/rtl.jquery.mobile-1.4.0.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="scripts/libs/angular.min.js"></script>
<script src="scripts/libs/angular-touch.min.js"></script>
<script src="scripts/libs/angular-route.min.js"></script>
<script src="scripts/libs/angular-sanitize.min.js"></script>
<script type="text/javascript" src="scripts/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function () {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.mobile.pushStateEnabled = false;
$.mobile.defaultPageTransition = 'slide';
$.mobile.buttonMarkup.hoverDelay = 0;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script type="text/javascript" src="scripts/libs/rtl.jquery.mobile-1.4.0.js"></script>
</head>
<body ng-controller="mainController as main">
<div data-role="page" id="home">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<img style="display: block; margin: 10px auto 30px auto;max-width: 90%; max-height: 90%;" ng-src="{{vm.config.customer.logo}}" alt="{{vm.config.customer.name}}" />
<div data-role="controlgroup">
<a href="#reportPage" class="ui-btn ui-corner-all ui-icon-tmblocate">Sites Mapping</a>
<a href="#messages" class="ui-btn ui-corner-all ui-icon-tmbmail">Messages</a>
<a href="#underConstruction" class="ui-btn ui-corner-all ui-icon-tmbmap">On Cnostruction</a>
<a href="#underConstruction" class="ui-btn ui-corner-all ui-icon-tmblock">Profile</a>
</div>
</div>
</div>
<div data-role="page" id="reportPage" ng-controller="reportController">
<div data-role="header">
<h2>{{vm.config.customer.name}}</h2>
</div>
<div data-role="main" class="ui-content">
<div ng-show="stage=='map'">
<div>
<table class="button-panel">
<tr>
<td><img src="images/mail-sent.png" ng-click="goNextStage()" /></td>
<td class="big" ng-style="{'background': 'url('+ report.Photo +') no-repeat center', 'background-size': '200px'}"><img src="images/photo-large.png" ng-click="takePhoto()" /></td>
<td><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td><a href='/#'>Home</a></td> <----this Home link!!!
</tr>
</table>
</div>
<div style="clear:both"></div>
<select id="reportType" ng-model="viewModel.reportType" ng-options="reportType.Text for reportType in reportTypes"></select>
<div id="addressForm">
<table style="width: 100%">
<tr>
<td style="width:200px">
<input ng-model="search.addressSearch" placeholder="Enter address" />
</td>
<td style="width:auto">
<button ng-click="searchForAddress()" class="ui-btn ui-btn-inline ui-btn-icon-right ui-icon-search ui-corner-all"></button>
</td>
<td style="text-align: left">
<button ng-click="gotoMyLocation()" class="ui-btn ui-btn-inline ui-corner-all ui-btn-icon-notext ui-icon-location"></button>
</td>
</tr>
</table>
</div>
<div id="map"></div>
</div>
<div ng-show="stage=='success'">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goPreviousStage()" /></td>
<td></td>
</tr>
</table>
</div>
<div class="ui-body ui-body-a ui-corner-all" style="margin: 20px 10px;">
<img src="images/success.png" style="float: right; width: 100px; margin: 5px;" />
<h3>Site saved</h3>
<p>
Saved.<br />
Number: <span id="reportId">{{reportId}}</span>
<br />
Thank you for coorparating
</p>
</div>
</div>
<div ng-show="stage=='error'"></div>
</div>
<div id="addressPanel" data-role="panel" data-position="left" data-display="overlay">
<ul data-role="listview">
<li ng-repeat="address in search.results">
<a href ng-click="setAddress(address)">{{address.formatted_address}}</a>
</li>
</ul>
</div>
</div>
<div data-role="page" id="messages" ng-controller="messagesController">
<div data-role="header">
<h2>Masseges</h2>
</div>
<div data-role="main" class="ui-content">
<div>
<table class="button-panel">
<tr>
<td></td>
<td class="big"><img src="images/home-large.png" ng-click="goBackPlease()" /></td>
<td></td>
</tr>
</table>
</div>
<ul id="messageList" data-role="listview" data-inset="true">
<li ng-repeat="message in messages | orderBy:'-Date' track by $index">
<h2>{{message.Title}}</h2>
<p ng-bind-html="message.Body | wrapphones"></p>
<p style="text-align: left">{{message.Date | date:'dd/MM/yyyy'}}</p>
</li>
</ul>
</div>
</div>
<div data-role="page" id="underConstruction">
<div data-role="header">
<h2>On construction</h2>
<a href="#" onclick="window.goBackPlease()" class="ui-btn ui-btn-inline ui-icon-back ui-btn-icon-right ui-corner-all btn-back" style="float: right !important;">Back</a>
</div>
<div data-role="main" class="ui-content">
<img style="width: 95%; display: block; margin: 10px auto;" src="images/Under-Construction.gif" alt="Under Construction" />
</div>
</div>
<div data-role="page" id="logPage">
<div data-role="header">
<h2>LOG</h2>
</div>
<div data-role="main" class="ui-content">
<ul id="log"></ul>
</div>
</div>
z
<script src="phonegap.js"></script>
<script type="text/javascript" src="scripts/libs/ol.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/app/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/app/filters/wrapphones.js"></script>
<script src="scripts/app/services/coordinateSerivce.js"></script>
<script src="scripts/app/services/reportService.js"></script>
<script src="scripts/app/services/mapService.js"></script>
<script src="scripts/app/services/pushService.js"></script>
<script src="scripts/app/controllers/mainController.js"></script>
<script src="scripts/app/controllers/reportController.js"></script>
<script src="scripts/app/controllers/messagesController.js"></script>
</body>
</html>
答案 0 :(得分：1)
你基本上没有去另一个页面，或者重新加载它。你留在同一页面，只是试图跳到顶部。 reportPage会将您转到ID为<td><a href='/#'>Home</a></td>
的元素，删除ID并不是必要的意思＆＃34;滚动到顶部＆＃34;。当您似乎到达页面顶部时，只需将其更改为：
/通过明确地将您带到顶部，它将正常运行。
如果它仍然无效，建议将位置设置为<td><a href='javascript:location.href="/";location.reload();'>Home</a></td>
并使用javascript重新加载页面：
location.reload(){{1}}句子可能是多余的（对我来说，没有它可以正常工作），但正如你所说，你有重新加载的问题，你也可以尝试这句话。
答案 1 :(得分：1)
为了确保一切，请在您的页面中添加以下JS行：
$('a[href="/"]').off();
jQuery off删除一个事件处理程序 .off（），不带任何参数会删除附加到元素的所有处理程序。
您的代码将有效！只需使用正确的xHtml：
<td><a href="/">Home</a></td>
或者，保留在同一个文件夹中
<td><a href="./">Home</a></td>
如果你有 www.yoursite.com/ciao/#apage href =＆＃34; ./"将返回 www.yoursite.com/ciao/ ，而href =＆＃34; /＆＃34;将返回 www.yoursite.com
答案 2 :(得分：1)
一种方法可能是将input元素作为body元素的第一个子元素，tabindex设置为1;使用history.replaceState()
<!DOCTYPE html>
<html>
<head>
<style>
#abc {
position: relative;
top: 800px;
}
</style>
<script>
function home(e) {
e.preventDefault();
history.replaceState({}, "home", location.pathname);
document.getElementById("home").focus()
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input tabindex="1" type="button" id="home" style="opacity:0;width:0;height:0" />
<table>
<tbody>
<tr>
<td><a href="#abc">abc</a>
</td>
</tr>
<tr>
<td id="abc"><a href="" target="_self" onclick="home(event)">Home</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>