javascript AngularJS 添加到浏览器历史记录，无需重新加载页面和 HTML5 pushstate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19031250/
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
AngularJS add to browser history without page reload and without HTML5 pushstate
提问by adam0101
I have a search page that allows the user to drill-down into categories and/or enter search terms. I want to give the user the ability to use the back button to undo these actions. Using AngularJS, how can I have this page add entries to the browsers history for each of these actions. I cannot use HTML5 pushstate.
我有一个搜索页面，允许用户深入分类和/或输入搜索词。我想让用户能够使用后退按钮撤消这些操作。使用 AngularJS，我如何让这个页面为这些操作中的每一个添加条目到浏览器历史记录。我不能使用 HTML5 pushstate。
回答by adam0101
I found I can do this by changing the query string parameters without reloading the page by using the answer about reloadOnSearchfrom here:
我发现我可以通过改变查询字符串参数，无需通过对答案重新加载页面为此reloadOnSearch从这里：
$routeProvider
.when('/items', {
controller: 'ItemsCtrl',
templateUrl: '/templates/items',
reloadOnSearch: false
},
...
);
And then, from that same answer, setting the query string using:
然后，根据相同的答案，使用以下方法设置查询字符串：
$location.search('id', 123);
And finally detecting route changesby using the answer from here:
最后使用这里的答案检测路线变化：
$scope.$on('$routeUpdate', function(){
$scope.sort = $location.search().sort;
$scope.order = $location.search().order;
$scope.offset = $location.search().offset;
});
回答by mrzmyr
You can turn off the HTML5 mode with $locationProvider.html5Mode(false).
您可以使用 关闭 HTML5 模式$locationProvider.html5Mode(false)。
Then just use hashbang urls like <a href="#!/search">Search</a>, they will be added to the history of the browser.
然后只需使用 hashbang urls like <a href="#!/search">Search</a>，它们将被添加到浏览器的历史记录中。
回答by Matt
I don't believe it's possible to add entries to the browser history without using HTML5 pushstate (at least, without actually changing the current location).
我不相信在不使用 HTML5 pushstate 的情况下将条目添加到浏览器历史记录中是可能的（至少，没有实际更改当前位置）。
The MDN page discusses the introduction of pushstate and how it enables this new functionality (implying it wasn't possible before): https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
MDN 页面讨论了 pushstate 的引入以及它如何启用这个新功能（暗示它以前是不可能的）：https: //developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
EDIT: If the reason you can't use HTML5 pushstate is because of browser support, see this polyfill: https://github.com/browserstate/history.js
编辑：如果您不能使用 HTML5 pushstate 的原因是浏览器支持，请参阅此 polyfill：https: //github.com/browserstate/history.js
回答by RICKY KUMAR
Along with the reloadOnSearchbelow code to track the location change event worked for me.
与下面的代码一起reloadOnSearch跟踪位置更改事件对我有用。
$scope.$on('$locationChangeSuccess', function () {
$scope.sort = $location.search().sort;
$scope.order = $location.search().order;
$scope.offset = $location.search().offset;
});
Though it might help for someone.
虽然它可能对某人有帮助。
