history.pusht狀態/後退按鈕/在單個頁面中導航應用程序

Question

我正在用導航功能構建一個小型單頁應用程序。頁面位於div容器中，通過點擊鏈接顯示。該頁面changig代碼

 // show the given page, hide the rest 
     function show(elementID) { 
      history.pushState({ 
       plate_id: 1, 
       plate: elementID 
      }, null, elementID); 
      goTo(elementID); 
     } 
     function goTo(elementID) { 
      var ele = document.getElementById(elementID); 
      if (!ele) { 
       console.log("fail"); 
       return; 
      } 
      // get all pages, loop through them and hide them 
      var pages = document.getElementsByClassName('page'); 

      for(var i = 0; i < pages.length; i++) { 
       pages[i].style.display = 'none'; 
      } 
      // then show the requested page 
      ele.style.display = 'block'; 
     } 
     window.onpopstate = function (event) { 
       var content = ""; 
       if(event.state) { 
       content = event.state.plate; 
       } 
       if (content != '') goTo(content); 
     } 

的鏈接看起來像

<a href="#" onclick="show('Page_1');" id="1">page 1</a> 

和div的

<div id="Page_1" class="page" style=""> 

現在，當我使用某個鏈接的網址更改爲.../Page_1＃或.../Page_2＃頁面直接顯示。現在，如果我使用後退按鈕（自己或瀏覽器無關緊要），會發生一些我不明白的魔法。

例如

1. 上點擊第一連桿 - >去../Page_1#（直接，everythinks細）上謝勝利鏈路
2. 點擊 - >去../Page_2#（直接， everythinks罰款）
3. 使用後退按鈕 - >再次使用後退按鈕去../Page_2（不包括＃和什麼也沒有發生，但應該去PAGE_1 ??? !!）
4. - >去../Page_1# （什麼也沒有發生）
5. 再次使用後退按鈕 - >轉到../Page _1（頁面1正在加載）

我不明白爲什麼在第3步和第4步發生思考！這將是很好，如果有人可以幫助我

Answer 1

也許你想你的鏈接的onclick是：onclick="show('Page_1'); return false;"或onclick="return show('Page_1');"和你的節目的功能與return false;完成。

通過返回false，瀏覽器實際上不會遵循href="#"，而只是執行JavaScript代替。

Answer 2

我會這樣做與AngularJS，因爲你不必關心history.js。它開箱即用。

請檢查下面的演示，讓你開始。你也可以在jsFiddle here找到相同的代碼。

在鏈接活動類沒有正確設置，但這並不難。這在AngularJS的一些例子中以及在這裏描述。看到這個SO question

'use strict'; 
 

 
var pageTemplate = "<div>{{page.title}}<div>"; 
 
var pageTitles = ['Page1', 'Page2']; 
 

 
var app = angular.module('routingDemo', ['ngRoute']); 
 

 
app.config(['$routeProvider', '$locationProvider', 
 

 
function ($routeProvider, $locationProvider) { 
 
    //$locationProvider.html5Mode(true); 
 

 
    $routeProvider. 
 
    when('/', { 
 
     //templateUrl: 'partials/phone-list.html', 
 
     template: "<div>main page</div>", 
 
     //controller: 'MainCtrl' 
 
    }). 
 
    when('/pages/:pageId', { 
 
     //templateUrl: 'partials/phone-detail.html', 
 
     template: pageTemplate, 
 
     controller: 'PagesCtrl' 
 
    }). 
 
    otherwise({ 
 
     redirectTo: '/' 
 
    }); 
 
}]); 
 

 
app.controller('PagesCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) { 
 
    $scope.page = { 
 
     'title': pageTitles[$routeParams.pageId - 1] 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script> 
 
<script src="https://code.angularjs.org/1.2.6/angular-route.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div ng-app="routingDemo"> 
 
    <nav class="navbar navbar-default" role="navigation"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#/">Static pages demo</a> 
 
     </div> 
 
     <div> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#/pages/1">Page 1</a></li> 
 
       <li><a href="#/pages/2">Page 2</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
    <div class="container" ng-view></div> 
 
</div>