我在我的angularjs应用程序中为ui路由器状态配置了以下配置.
$locationProvider.html5Mode(true);
$stateProvider
.state('index', {
url: '/index?zoom¢er',
views: {
'map': {
controller: 'MapCtrl',
templateUrl: 'map.html'
}
},
reloadOnSearch:false
});
但是,浏览器中的后退按钮会转到不同的URL,但我需要使用url作为stateParams重新加载页面.
例如:User1转到页面http://www.example.com/index?zoom=2¢er=1,2.然后他在页面中进行操作,网址变为http://www.example.com/index?zoom=12¢er=3,4
然后他按下后退按钮,url更改为上一个,但我需要重新加载我的页面让控制器读取查询参数才能做正确的事情......
任何方式让它与浏览器后退/前进一起工作？
哪一个更好？使用片段标识符......
http://www.alinkthatdoesnotwork.com/#!/dir1/dir2/file.html
...或新的Javascript History API？
https://github.com/examplethatdoesnotwork/project/src/script.js
或者我应该同时使用两者？(通过后备)
方面:
我目前正面临HTTP post表单和历史pushstate的一个小问题.
当我的用户提交POST表单example.com/page-1然后单击此页面中的链接时,会将其重定向到example.com/page-2history.pushstate.JS脚本只是更改当前URL,将旧的推送到历史记录,然后显示新内容.这对我来说非常好.
问题:一旦用户打开example.com/page-2并手动刷新页面(ctrl + r或刷新按钮),Chromes会提示用户再次提交表单; 但表格实际上已经example.com/page-1存在,并且没有理由在这个"新"页面再次询问它.
有没有办法在popstate更改中清除javascript中所有以前提交的数据,以防止从浏览器重新发送提示？或者我错过了我的历史状态？或者它目前还没有被浏览器实现？
我只用chrome测试它,因为我没有用其他浏览器实现pushstate.
我正在使用Rails 4创建Pinterest,就像模态叠加一样.它们显示在无限滚动页面的半透明覆盖上.
目前,当您单击该链接时,浏览器的历史记录将更改为反映您正在查看的项目.但是我有一个退出按钮,当按下时,我想让它删除覆盖(它已经做了),但然后更改URL而不会丢失用户在无限滚动上的位置.
pinterest究竟如何在不刷新最后一页的情况下完成更改URL？我会使用带有'/'的pushState,但我有多种类型的无限滚动页面,我希望脚本适用于所有这些页面.
的application.js
if (history && history.pushState){
$(function(){
$('body').on('click', 'a', function(e){
$.getScript(this.href);
history.pushState(null, '', this.href);
});
$(window).bind("popstate", function(){
$.getScript(location.href);
});
});
}
关闭覆盖脚本
function removeDabble() {
history.back(-1);
/*var elem = document.getElementById('artview');
elem.parentNode.removeChild(elem);
return false;*/
}
我有一个与Cordova一起开发的混合应用程序.该应用程序非常简单,所以我没有使用框架.几乎所有的页面都是使用jQuery的ajax()方法通过Ajax注入的,然后通过该pushState()方法使用HTML5 History API在历史记录中添加.
为了让用户返回之前访问过的页面(历史记录中的页面),我创建了一个按钮.我监听backbutton事件以及点击该按钮,当事件被触发时,我执行以下处理程序:
onBackButton: function() {
window.history.length === 0 ? navigator.app.exitApp() : window.history.back();
}
为了确保最大程度的兼容性,我还将history.js添加到项目中.
它就像Android上的魅力和Mac上的iOS模拟器一样,但不适用于真实设备.会发生什么是iOS捕获事件但该方法的执行不会更改页面.我已经基于StackOverflow上的先前答案尝试了几种方法,但没有运气.一些例子是:history.back()不能在phonegap ios构建中工作,Phonegap - navigator.app.backHistory()不能处理HTML后退按钮.
我能尝试什么？
我的html中有两个按钮:
<a href="" class="sbtn sbtn-default" ng-click="GoToNext()"><i class="fa fa-angle-right"></i> Next </a>
<a href="" class="sbtn sbtn-default" ng-click="GoToPrev()"> Prev <i class="fa fa-angle-left"></i></a>
然后在我的控制器中:
$scope.GoToNext = function () {
var nextPage = getNextPage("next");
history.pushState(null, "Site Title", nextPage);
getQuestion();
}
$scope.GoToPrev = function () {
var prevPage = getNextPage("prev");
history.pushState(null, "Site Title", prevPage);
getQuestion();
}
和getNextPage函数是:
function getNextPage(type) {
var querystr = window.location.pathname.split('/')[4];
var currentQuestion = querystr.split("-")[1];
var currentBook = querystr.split("-")[0];
switch (type) {
case "next":
return ((currentBook + "-") + (+currentQuestion + +1));
case …我想根据常量值设置tag 的href属性base值.为此,我已base在head元素中声明了如下属性:
<head>
<base ng-href="{{baseUrl}}">
</head>
并baseUrl使用此代码段设置值:
app.run(["$rootScope","env", function($rootScope, env){
$rootScope.baseUrl = env.baseUrl;
}]);
envAngular常量在哪里.
该locationProvider配置以这种方式:
.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
})
当我运行它时,我看到正确设置的值:
<base ng-href="/" href="/">
但在控制台中我收到此错误:
Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present!
http://errors.angularjs.org/1.3.14/$location/nobase
at REGEX_STRING_REGEXP (angular.js:63)
at $LocationProvider.$get (angular.js:11293)
at Object.invoke (angular.js:4185)
at angular.js:4003
at getService (angular.js:4144)
at Object.invoke (angular.js:4176)
at angular.js:4003
at getService (angular.js:4144)
at Object.invoke (angular.js:4176)
at angular.js:6485 …我在Stack Overflow上发现了很多关于这个问题的问题,但是他们都对某些部分非常具体.我确实找到了这个问题,其答案提供了一些很好的参考,但它们并没有真正解释它是如何工作的,它们的例子几乎没有做任何事情.我想更多地了解它是如何一起工作的,我想使用vanilla JavaScript.
(此外,其他问题的许多答案都已有数年之久了.)
我说我有一个像这样的页面的部分(粗略的HTML给出一个想法):
www.mydomain.com/contact-us
<div class="regional-offices">
<div class="south-west">
<a href="#south-west">South West</a>
<div class="south-west-content">South west office address</div>
</div>
<div class="north-east">
<a href="#north-east">North East</a>
<div class="north-east-content">North east office address</div>
</div>
...
...
目前,这些是一组手风琴,展开以显示链接点击时的内容.我想要做的是将它们视为单独的URL,以便它们可以被Google单独编入索引,当然它们只是一个页面的一部分.
我一直在研究历史API,并且可以看到我如何为每个部分创建唯一的URL这样做,但我的理解落在了谷歌或其他搜索引擎将如何处理这些链接,如果所需的信息已经是页面,而不是存储在自己的单独URL.
例如,第一步是将<a>标记更改为:
<a href="/contact-us/north-east">North East</a>
然后我们可以使用JS preventDefault()直接转到URL,而是为用户提供扩展的手风琴,使用History API将页面向下滚动到手风琴和唯一的URL.如果我们直接访问URL或点击任何链接,这一切都很好.
但问题是,据我所知,Google抓取工具会尝试关注该链接并面对404,因为没有Javascript阻止访问URL中的资源.而且我也不希望有.
或者我需要一个独特的位置来保存手风琴的内容,这是可转位的,并且当折叠的手风琴与之交互时也会用AJAX拉入？
如果我没有说清楚,请道歉.
在我的应用程序中，要使用以下代码隐藏URL中的某些信息。
history.replaceState ({}, "", "bar.html");
它可以在所有浏览器中运行，但最新版本为firefox（v56 +）
在Firefox中，如果我按F5键，则它会返回到我已被上述代码替换的上一个URL。
任何帮助将不胜感激。
html5-history ×10
javascript ×7
angularjs ×3
html5 ×2
jquery ×2
pushstate ×2
api ×1
base-url ×1
cordova ×1
debugging ×1
firefox ×1
forms ×1
github ×1
history.js ×1
http-post ×1
ios ×1
page-refresh ×1
seo ×1