I'm trying to write a function to ajaxyfy a web site, everything works perfect, except function for a back button.
That's what I have for now:
function loading() {
if (typeof history.pushState !== "undefined") {
var historyCount = 0;
$('.menu-item, .logo').on('click','a',function(e){
e.preventDefault();
$(this).data('clicked', true);
if ($(this).is('.logo a')) {
var homepage = $(this).attr('href');
function1(homepage);
history.pushState(null, null, homepage);
}
else if ($(this).is('.projects a')) {
var projects = $(this).attr('href');
function2(projects);
history.pushState(null, null, projects);
}
else {
var pages = $(this).attr('href');
function3(pages);
history.pushState(null, null, pages);
}
});
window.onpopstate = function(){
if(historyCount) {
goTo(document.location);
}
historyCount = historyCount+1;
};
}
}
function function1(homepage) {
$.ajax({
url: homepage,
success: function(data) {
$('.container_right_wrapper').hide('slide', {direction: 'left'}, 300, function(){
$(this).html(data).show('slide', {direction: 'right'}, 300);
console.log('home');
});
}
});
}
function function2(projects) {
$.ajax({
url: projects,
success: function(data) {
$('.container_right_wrapper').hide('slide', {direction: 'left'}, 300, function(){
$(this).html(data).show('slide', {direction: 'right'}, 300);
console.log('projects');
});
}
});
}
function function3(pages) {
$.ajax({
url: pages,
success: function(data) {
$('.container_right_wrapper').hide('slide', {direction: 'left'}, 300, function(){
$(this).html(data).show('slide', {direction: 'right'}, 300);
console.log('page');
});
}
});
}
and there is a problem with
window.onpopstate = function(){
if(historyCount) {
goTo(document.location);
}
historyCount = historyCount+1;
};
If I leave goTo it doesn't work at all, if i put a name of any other function, ie function1 , it works only for function 1. How to make it work for all three functions regardless of what function has been triggered?
EDIT
What I'm really concrned about is function:
window.onpopstate = function(){
if(historyCount) {
goTo(document.location);
}
historyCount = historyCount+1;
};
It's name is, as can be clearly seen, goTo (because primarily it was related to a function named goTo(href) ). In if conditional tags I call functions: function1 , function2 , function3 , which replaced earlier existent function goTo(href) . When I divided function to three idividual functions, above window.popstate... function stopped to work. I need to have three different function because I need to three different thing happen when clicking on different menu buttons. I can replace goTo with function1 or function2 ...etc, but then the back button works only for the oneof those three functions. And I want it to work for all of them.
Well, I managed to do everything by myself. I digged a bit deeper into HTML5 push.state and and I made following changes:
I changed
history.pushState(null, null, homepage);
to:
history.pushState('function1', null, homepage);
I did analogous changes to two other push.state functions. Then I replaced
window.onpopstate = function(){
if(historyCount) {
goTo(document.location);
}
historyCount = historyCount+1;
};
with:
window.onpopstate = function(){
if(historyCount) {
var JSONattr = (JSON.stringify(event.state).replace(/\"/g, ""));
window[JSONattr](document.location);
}
historyCount = historyCount+1;
};
what pulls a name of every of three functions from push.state , and thanks to that, with every browser's back button hit, the desired function is being executed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.