主页未显示在Google Chrome中
[英]The home page not displayed in google chrome
问题描述
I use chrome browser. 
我使用Chrome浏览器。 I use this row: 我使用此行：
<td><a href = '/'; >Home</a></td>
To go back to home page. 返回首页。
For example: 例如：
If I have this URL in address bar: 如果我在地址栏中输入此URL：
http://localhost:1234/#reportPage http：// localhost：1234 /＃reportPage
After I press Home ,I get this URL in address bar: 按Home ，我在地址栏中获得以下URL：
http://localhost:1234/ http：//本地主机：1234 /
The reportPage is ID of the div tha has data-role="page". reportPage是具有data-role =“ page”的div的ID。
The address bar is changes but the view not changes(the old view remain in the same place,the view of HTML page not changes). 地址栏已更改，但视图未更改（旧视图保留在同一位置，HTML页面的视图未更改）。
But if use FF or IE browser it works perfect,when I press Home button the address bar changes and also the view changes to the Home page. 但是，如果使用FF或IE浏览器，则可以完美运行，当我按“ Home按钮时，地址栏也会更改，视图也将更改为“主页”。 Any idea why I have problems the the code above in google chrome? 知道为什么我在谷歌浏览器上面的代码有问题吗？
Here my HTML code: 这是我的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>
3 个解决方案
解决方案1
1 2015-12-19 14:22:04
You basically don't go to another page, or reload it. 您基本上不会转到其他页面或重新加载它。 You stay on the same page, just trying to jump to the top. 您停留在同一页面上，只是试图跳到顶部。 #reportPage takes you to an element with the id reportPage , removing the id doesn't necessary mean "scroll to top". #reportPage将您带到ID为reportPage的元素，删除ID不一定意味着“滚动到顶部”。 As you seem to get to the top of the page, just change it to: 就像您到达页面顶部一样，只需将其更改为：
<td><a href='/#'>Home</a></td>
It'll function correctly, by explicitly taking you to the top. 通过将您带到顶部，它将正常运行。
If it doesn't work still, the suggestion is to set the location to / and reload the page with javascript: 如果仍然无法正常工作，建议将位置设置为/ ，然后使用javascript重新加载页面：
<td><a href='javascript:location.href="/";location.reload();'>Home</a></td>
The location.reload() sentence may be excess (for me it does work without it), but as you say you have problems with reloading, you can also try with this sentence. location.reload()句子可能有点多余（对我来说，它确实可以在没有它的情况下工作），但是正如您说的那样，在重新加载时遇到问题，您也可以尝试使用此句子。
解决方案2
1 2015-12-19 15:46:59
To be sure of all, add this line of JS in your pages: 可以肯定的是，在您的页面中添加以下这行JS：
$('a[href="/"]').off();
jQuery off Remove an event handler, .off() with no arguments removes all handlers attached to the elements. jQuery off删除事件处理程序，不带参数的.off（）删除所有附加到元素的处理程序。
Your code will works! 您的代码将起作用！ Just use the correct xHtml: 只需使用正确的xHtml：
<td><a href="/">Home</a></td>
or, to remain in the same folder 或者，保留在同一文件夹中
<td><a href="./">Home</a></td>
If you have www.yoursite.com/ciao/#apage href="./" will return www.yoursite.com/ciao/ while href="/" will return www.yoursite.com 如果您拥有www.yoursite.com/ciao/#apage href =“ ./”将返回www.yoursite.com/ciao/，而href =“ /”将返回www.yoursite.com
解决方案3
1 2015-12-19 15:53:28
One approach could be to include an input element as first child of body element, with tabindex set to 1 ; 一种方法可能是将input元素作为body元素的第一个子元素包含在内，且tabindex设置为1 ； using history.replaceState() 使用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>
plnkr http://plnkr.co/edit/sRyoc4uR2N4F8sbzD4zZ?p=preview plnkr http://plnkr.co/edit/sRyoc4uR2N4F8sbzD4zZ?p=preview
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.