Issue with using html5 API popState and pushState specially in chrome
Question
I'm working on an Ajax-based website...
In my site, every single page will load from other script into one of my DIV s using jQuery Ajax...
So, as you know, I need to use HTML5 History API for some reasons...
You can find my sample page on THIS LINK...
I made some images for help , because my page is in Persian and you may couldn't find out my mean..
This is the image:
As you may found out, I tried to make something like windows8 ...
And this is the story:
1/ When user click on cubes, they will transform 360 deg and became full screen...
2/ The related content will get from another file using jQuery Ajax method and insert to this div ...
3/ The location bar hash will change with HTML5 history API ---> pushState ...
4/ Page title will updated using $('title').html(myTitle) ...
5/ And onpopstate function will defined ...
Description:
A=> The cubes that marked with (( don't work )), don't have any target page for Ajax request , so they will destroy the page, on click...!!!
B=> Every thing works fine in Firefox and Internet Explorer11 excep forward button...
Now my issues with this page:
I=> The favicon disappear in google chrome33 and opera20 and Internet Explorer11 after Ajax request and when the page title will update...!!!
II=> When I click on the back button, the page will update correctly and every thing is fine, but when I click on forward , there is not any reaction and page will load without css and js files when refresh the new forwarded page...!!!
I'm not sure next problems are because of html5 history API, and accept my apologize if it's true.
III=> The login form buttons are disable in google chrome when a div is full screen, ...?!?!?
IV=> As you can see in the image above, inside the div.third mouseover event don't work, when the product page or articles page are full screen... ( just in chrome )
I know that my question was detailed and appreciate for your attention.
Please guide me to right way for fixing this errors...
I researched about html5 history API in links below:
http://www.ssdtutorials.com/tutorials/series/html5-pushstate.html
http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate
https://developer.mozilla.org/en-US/docs/Web/API/Window.history
https://developer.mozilla.org/en-US/docs/Web/API/window.onpopstate
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
HTML5/jQuery: pushState and popState - deep linking?
http://www.whatwg.org/specs/web-apps/current-work/#handler-window-onpopstate
http://diveintohtml5.info/history.html
http://code.tutsplus.com/tutorials/a-first-look-at-the-history-api--net-28053
EDIT :
arian.js
// JavaScript Document
$(document).ready(function(e) {
/*/---- C H E C K I F A L L IMAGES L O A D E D ----/*/
var total_images = $("body img").length;
var percentPerImage = 100 / total_images;
var images_loaded = 0;
var percent = 0;
$("body").children().not('.meter').hide();
console.log('percentPerImage--> ' + percentPerImage);
$("body").find('img').each(function() {
var fakeSrc = $(this).attr('src');
$("<img/>").attr("src", fakeSrc).css('display', 'none').load(function() {
images_loaded++;
percent += percentPerImage;
$(".meter > span")//During image loading ProgressBar
.animate({
width: percent + '%'
}, 400); //During image loading ProgressBar
if (images_loaded >= total_images) {
// now all images are loaded.
$("body").children().show();
$('.meter').hide();
//$("body h1").hide();
}//if (images_loaded
});//$("<img/>").attr("src"
});//$("body").find
/*/----- C H E C K I F A L L IMAGES L O A D E D ----/*/
var WinWidth, WinHeight, HeaderHeight;
$('#offer, #hamkaran, #middle_transparent').css('cursor', 'default');
WinWidth = $(window).width();//دریافت عرض صفحه مرورگر
WinHeight = $(window).height();//دریافت ارتفاع صفحه مرورگر
HeaderHeight = $('#header').height();//ارتفاع هدر سایت
$('html, body').css('height', WinWidth *2);
if ( $('html, body').scrollTop() == WinWidth*2 ) {
}
/*/---- A R R O W B U T T O N S B E H A V I O R ----/*/
$('div.arrows').not('#part2_right, #part1_right, #part1_down').hide();
$('#loginForm').hide();
$(document).on('click', '#part2_right', function(){
$(this).fadeOut('slow');
$('html, body').animate({scrollLeft: 850}, 500, 'easeOutQuint');
$('#part2_left').fadeIn('slow');
});
$(document).on('click', '#part1_right', function(){
$('#part2_right').fadeOut('slow');
$('html, body').animate({scrollLeft: 850}, 500, 'easeOutQuint');
$('#part2_left').fadeIn('slow');
});
$(document).on('click', '#part2_left', function(){
$('#part2_right, #part1_right').fadeIn('slow');
$('html, body').animate({scrollLeft: 0}, 500, 'easeOutQuint');/*easeInQuart*/ /*easeInOutQuint*/
$('#part2_left').fadeOut('slow');
});
function downScroll() {
$('html, body').stop(true).animate({scrollTop:WinWidth*2}, 800, 'easeInCubic', false).mousemove(function(e) {
$('#bg3d').css({'left':e.pageX/40});
});;
$(this).one('click', upScroll);
$('#part1_down').css({'background-image':'url(images/arrows/light/arrowTop.png)'});
}
function upScroll() {
$('html, body').stop(true).animate({scrollTop:0}, 800, 'easeInOutCubic', false);
$(this).one('click', downScroll);
$('#part1_down').css({'background-image':'url(images/arrows/light/arrowBottom.png)'});
}
$('#part1_down').one('click', downScroll);
/*/---- A R R O W B U T T O N S B E H A V I O R ----/*/
/*/----- L O G I N B E H A V I O R ----/*/
function down() {
$('#loginForm').slideDown('slow', 'easeOutQuint', false);
$(this).one('click', up);
}
function up() {
$('#loginForm').slideUp('slow', 'easeOutQuint', false);
$(this).one('click', down);
}
$('#login').one('click', down)
/*/------ L O G I N B E H A V I O R -----/*/
/*/----- C L I C K ON DIV . M O R A B A -----/*/
$(document).on('click', 'div.moraba', function(e) {
$('div.moraba, div.mostatil, div.big_moraba, div.arrows').not(this).stop(true).fadeOut('fast');
$('html, body').css('overflow','hidden');
if ( $(this).attr('id') == 'offer' || $(this).attr('id') == 'hamkaran' || $(this).attr('id') == 'middle_transparent' ) {
e.preventDefault();
return;
};
if ( $(this).css('width') == '120px' ) {
var detail = {};
detail.id = $(this).attr('id');
detail.class = $(this).attr('class').substr(7);
detail.htmlCode = $(this).html();
}
else {
return;
};
//alert(detail.htmlCode)
if ( detail.class.substr(0,4) == 'part' ) {
$(this)
.animate({
width: WinWidth,
height: WinHeight,
marginTop: -85,
marginLeft: -263
}, 300, 'easeOutQuint', false)
.data({ id: detail.id, class: detail.class, htmlCode: detail.htmlCode})
.css('z-index',500)
.transition({rotateY:'360deg'}, 1500,'snap');
$('html, body').animate({scrollLeft: 850})
}
else {
$(this)
.animate({
width: WinWidth,
height: WinHeight,
marginTop: -85,
marginLeft: -210
}, 300, 'easeOutQuint', false)
.data({ id: detail.id, class: detail.class, htmlCode: detail.htmlCode})
.css('z-index',500)
.transition({rotateY:'360deg'}, 1500,'snap');
};
var URL;
switch ( $(this).attr('id') ) {
case 'radif4_dovomi':
URL = 'pages/Ajax/maqhalat.php';
headerBar = '<span style="font-size:21px; color:rgb(25, 200, 243);">مقالات</span>';
break;
case 'radif4_avali':
URL = 'pages/Ajax/download.php';
headerBar = '<span style="font-size:21px; color:rgb(130, 131, 255);">دانلود</span>';
break;
case 'news':
URL = 'pages/Ajax/offer.php';
headerBar = '<span style="font-size:21px; color:#FB753C;">پیشنهاد ویژه</span>';
break;
/*
case 'topRight' :
URL = 'pages/Ajax/contactUs.php';
headerBar = '<span style="font-size:21px; color:#FB753C;">پیشنهاد ویژه</span>';
break;
*/
case 'about':
URL = 'pages/Ajax/calculator.php';
headerBar = '<span style="font-size:21px; color:rgb(0, 158, 175);">محاسبه گر</span>';
break;
}
// = 'pages/Ajax/' + detail.id + '.php';
$.ajax({
type:'POST',
url:URL,/*'http://localhost/Admin_arian_root/admin/pages/index_admin.php'*/
beforeSend: function() {
$('#' + detail.id).html('<img src="images/icons/loadingLarg.gif" width="400" height="400" style="margin:auto;" alt=""/>');
$('#cursor').html('<img src="images/icons/loader_light.gif" width="32" height="32" alt=""/><span>لطفأ کمی صبر کنید</span>');
},
statusCode: {
404: function(){
$('#' + detail.id).html('<h1>صفحه مورد نظر پیدا نشد</h1>')
}
},
cache:true,
success: function(result) {
$('#' + detail.id).html(result).data({ajaxResult: result});
var currentAddressBar = window.location.pathname;
var titleIndex0 = result.indexOf('<title>');
var titleIndex1 = result.indexOf('</title>');
var title = result.substring(titleIndex0 + 7, titleIndex1);
var hashBangIndex0 = URL.indexOf('.php');
var hash = URL.substring(11, hashBangIndex0);
var thisID = detail.id;
window.history.pushState({page : title, id : thisID }, title, currentAddressBar + '/' + hash);
$('title').html(title);
console.log(currentAddressBar + '\n Title--> ' + title + '\n hash--> ' + hash + '\n State--> ' + window.history.state.page + '\n ID--> ' + thisID );
window.onpopstate = function(event){
Reset();
window.history.replaceState({ page : "رین البرز، نخستین سایت خرید و فروش محصولات سرمایشی و گرمایشی", id : null}, "آرین البرز / خانه",currentAddressBar);
//pushState({page : "آرین البرز، نخستین سایت خرید و فروش محصولات سرمایشی و گرمایشی"}, "آرین البرز، خانه", currentAddressBar);
$('title').html("آرین البرز، خانه");
console.log('The State---> ' + window.history.state.page + '\nThe Id--> ' + window.history.state.id );
//window.history.pushState(null, title, currentAddressBar);
}
//var headerBar = '<span>' + detail.id + '</span>';
$('#cursor').html(headerBar)
}
})
})
/*/---- C L I C K ON DIV . M O R A B A ----/*/
/*/----- C L I C K ON DIV # L O G O -----/*/
$(document).on('click', 'div.mostatil#logo', function(e){
e.preventDefault();
$('div.moraba, div.mostatil, div.big_moraba, div.arrows').not(this).stop(true).fadeOut('fast');
//alert();
if ( $(this).css('width') == '250px' ) {
var detail = {};
detail.id = $(this).attr('id');
detail.class = $(this).attr('class').substr(7);
detail.htmlCode = $(this).html();
detail.top = $(this).css('top');
detail.left = $(this).css('left');
$.ajax({
type:'POST',
url:"pages/Ajax/products.php",
beforeSend: function() {
$('#logo').html('Loading, Please wait...')
},
statusCode: {
404: function(){
$(this).html('صفحه مورد نظر پیدا نشد');
}
},
success: function(result) {
$('#logo').html(result).css('background','none');
$('#cursor').html('<span style="font-size:19px; color:rgb(205, 160, 1);">محصولات</span>');
var titleIndex0 = result.indexOf('<title>');
var titleIndex1 = result.indexOf('</title>');
var title = result.substring(titleIndex0 + 7, titleIndex1);
$('title').html(title);
var currentAddressBar = window.location.pathname;
window.history.pushState({page : "آرین البرز / صفحه محصولات ", id : "logo"}, title, currentAddressBar+"/Products");
console.log('The State---> ' + window.history.state.page + '\nThe Id--> ' + window.history.state.id );
window.onpopstate = function(event){
Reset();
window.history.replaceState({ page : "رین البرز، نخستین سایت خرید و فروش محصولات سرمایشی و گرمایشی", id : null}, "آرین البرز / خانه",currentAddressBar);
//pushState({page : "آرین البرز، نخستین سایت خرید و فروش محصولات سرمایشی و گرمایشی"}, "آرین البرز، خانه", currentAddressBar);
$('title').html("آرین البرز، خانه");
console.log('The State---> ' + window.history.state.page + '\nThe Id--> ' + window.history.state.id );
//window.history.pushState(null, title, currentAddressBar);
}
//alert(currentAddressBar);
}
});//Ajax
}
else {
return;
}
$(this)
.animate({
width: WinWidth,
height: WinHeight,
marginTop: -85,
marginLeft: -210
}, 100, 'easeOutQuint', false)
.data({ id: detail.id, class: detail.class, htmlCode: detail.htmlCode})
.css({'z-index':500, 'cursor':'default'})
.transition({rotateY:'360deg'}, 1000,'snap');
$('html, body').css('overflow','hidden');
});
/*/----- C L I C K ON DIV # L O G O -----/*/
/*/----- C L I C K ON DIV # T O P R I G H T ( C O N T A C T ) -----/*/
$(document).on('click', 'div#topRight', function(){
$('div.moraba, div.mostatil, div.big_moraba, div.arrows').not(this).stop(true).fadeOut('fast');
if ( $(this).css('width') == '250px' ) {
var detail = {};
detail.id = $(this).attr('id');
detail.class = $(this).attr('class').substr(7);
detail.htmlCode = $(this).html();
detail.top = $(this).css('top');
detail.left = $(this).css('left');
$.ajax({
type:'POST',
url:"pages/Ajax/contactUs.php",
beforeSend: function() {
$(this).html('<img src="images/icons/Progressbar.gif" width="470" height="40" alt="آرین البرز، تماس با ما"/>')
},
statusCode: {
404: function(){
$(this).html('صفحه مورد نظر پیدا نشد');
}
},
success: function(result) {
$('div#topRight').html(result);
$('#cursor').html('<span style="font-size:19px; color:rgb(255, 10, 14);">ارتباط با ما</span>');
var currentAddressBar = window.location.pathname;
var titleIndex0 = result.indexOf('<title>');
var titleIndex1 = result.indexOf('</title>');
var title = result.substring(titleIndex0 + 7, titleIndex1);
var thisID = detail.id;
window.history.pushState({page : "آرین البرز / تماس با ما", id : thisID }, title, currentAddressBar + '/contactUs');
$('title').html(title);
//$('<link rel="shortcut icon" href="arianalborz.ico">arianalborz.ico</a>').appendTo('head')
console.log(currentAddressBar + '\n Title--> ' + title + '\n State--> ' + window.history.state.page + '\n ID--> ' + thisID );
window.onpopstate = function(event){
Reset();
window.history.replaceState({ page : "رین البرز، نخستین سایت خرید و فروش محصولات سرمایشی و گرمایشی", id : null}, "آرین البرز / خانه",currentAddressBar);
//pushState({page : "آرین البرز، نخستین سایت خرید و فروش محصولات سرمایشی و گرمایشی"}, "آرین البرز، خانه", currentAddressBar);
$('title').html("آرین البرز، خانه");
console.log('The State---> ' + window.history.state.page + '\nThe Id--> ' + window.history.state.id );
//window.history.pushState(null, title, currentAddressBar);
}
}
});//Ajax
}
else {
return ;
}
$(this)
.animate({
width: WinWidth,
height: WinHeight,
marginTop: -85,
marginLeft: -263,
}, 100, 'easeOutQuint', false)
.data({ id: detail.id, class: detail.class, htmlCode: detail.htmlCode})
.css({'z-index':500, 'cursor':'default'})
.transition({rotateY:'360deg'}, 1000,'snap', false);
$('html, body').animate({scrollLeft: 850}, 'fast', 'swing', false).css('overflow', 'hidden');
});
/*/----- C L I C K ON DIV # T O P R I G H T ( C O N T A C T ) -----/*/
/*/----- S T A R T I C O N C L I C K -----/*/
$('#start_menu').click(function(e) {
//Reset();
window.history.back();
});
/*/----- S T A R T I C O N C L I C K -----/*/
/*/---- F U N C T I O N R E S E T -----/*/
function Reset() {
$('div.mostatil#logo').fadeIn('fast').html($('#logo').data('htmlCode'));
$('div#maqhalat, div#topRight, div.big_moraba, div.arrows').fadeIn('fast')
$('.moraba').fadeIn('fast').each(function(index, element) {
if ( $(this).data('id') == 'undefined' || $(this).data('id') == null ) {
return;
}
else {
var id,width,height,top,left,marginLeft,marginTop;
id = $(this).data('id');
width = $(this).data('width');
height = $(this).data('height');
top = $(this).data('top');
left = $(this).data('left');
marginLeft = $(this).data('marginLeft');
marginTop = $(this).data('marginTop');
htmlCode = $(this).data('htmlCode');
//alert(htmlCode);
$('#'+id).fadeOut(700, 'easeOutQuint', function(){
$(this).removeAttr('style').removeClass('rotate').css('transition','all 1s').fadeIn(400);
$(this)
});
$('#'+id).html(htmlCode);
$(this).removeData();
$('#cursor').html('پنجره اصلی سایت آرین البرز')
$('body').css('overflow','visible');
}
});//moraba').each
if ( $('#logo').data('id') != "undefined" || $('#logo').data('id') != null ) {
//alert( 'yes' );
$('#logo').animate({width:250, height:120, marginTop:0, marginLeft:0}, 'easeInOutQuint', false)
.transition({rotateY:'0deg'}, 1000,'snap')
.css({'background':'linear-gradient(to right,rgb(214,164,1), rgb(204,160,1))', 'cursor': 'pointer'})
.removeData();
$('#cursor').html('پنجره اصلی سایت آرین البرز');
}
else {
return;
};
if ( $('#topRight').data('id') != "undifined" || $('#topRight').data('id') != null ) {
var htmlCode = $('#topRight').data('htmlCode');
$('div#topRight').animate({width:250, height:120, marginTop:0, marginLeft:130}, 'easeInOutQuint', false)
.transition({rotateY:'0deg'}, 1000,'snap')
.css({'cursor': 'pointer', 'z-index':0})
.removeData()
.html(htmlCode);
}
else {
return;
};
if ( WinWidth > 1600 ) {
$('html, body')
.animate({scrollTop: 0, scrollLeft: 0}, 700, 'easeOutQuint')
.css('overflow','auto')
.find('.arrows#part2_left')
.fadeOut('slow')
.parents('body')
.find('.arrows#part2_right').fadeIn('slow');
}//if ( winWidth > 1600
else {
$('.arr').not('div#part2_left').fadeOut('fast');
$('div#part2_left').fadeIn('fast');
}
}
//});//#start_menu').click
/*/----- F U N C T I O N R E S E T -----/*/
});
2 answers
solution1
1 2014-03-29 16:02:19
Thanks for posting js . If possible, can post css and html ?
Not certain about each listed issue. Will try to address those noticed.
1/, A=>
1/ When user click on cubes, they will transform 360 deg and became full screen... -Kiyarash
A=> The cubes that marked with (( don't work )) -Kiyarash
.transition({rotateY:'360deg'}, 1500,'snap');
.transition() not, that aware of, a valid jquery method , that is, does not appear mapped to jquery by an $.fn.extend() http://api.jquery.com/jQuery.fn.extend/ "declaration". Also, the css property for rotateY , that aware of, is transform , instead of transition . Unless unaware of specific included library that has defined a .transition() method.
Try
.css({"transform":"rotateY(360deg)", "-webkit-transform":"rotateY(360deg)" ..})
I=>
I=> The favicon disappear in google chrome33 and opera20 and Internet Explorer11 after Ajax request and when the page title will update...!!!-Kiyarash
Try
<link rel="shortcut icon" src="data:image/png;base64,.." />
or in (an) $.ajax() callback try
$("link[rel^=shortcut]").attr("src", "data:image/png;base64,..")
Edit (updated)
Noticed this piece, also
$('.moraba').fadeIn('fast').each(function(index, element) {
if ( $(this).data('id') == 'undefined' || $(this).data('id') == null ) {
return;
}
else { ..
At html document, with jquery ("1.10.2") loaded, and without jquery's .data() method defined or containing values for the given element, at console, try
$("html").data("id") == "undefined" // -> `false`
$("html").data("id") == undefined // -> `true`
Perhaps a prospective solution may be to break each block into individual "pieces", and test ( debug ) each individually ?
Thanks for sharing.
Hope this helps
solution2
0 2014-05-17 12:07:33
You basicly want to reprogram the PJAX library, I suggest you have a look at it at: https://github.com/defunkt/jquery-pjax
You can either implement it, which I would recommend since it's a huge effort to reprogramm it + it's fully degradable! Or you can look at its source to understand the history part!
Hope it helps, Cheers
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.