【发布时间】：2014-04-30 04:27:01
【问题描述】：
我正在开发一个基于 Ajax 的网站...
在我的站点中，每个页面都将使用 jQuery Ajax 从其他脚本加载到我的 DIVs 之一...
所以，如您所知，出于某些原因，我需要使用HTML5 History API...
您可以在THIS LINK... 上找到我的示例页面
我为help 制作了一些images，因为我的页面在Persian 中，你可能找不到我的意思..
这是图片：
@ 987654332@
正如您可能发现的那样，我尝试制作类似windows8...
故事是这样的：
1/ 当用户点击立方体时，他们将变换360 deg并变成全屏...
2/ 相关内容将使用jQuery Ajax method从另一个文件中获取并插入到此div...
3/ location bar 散列将随 HTML5 history API--->pushState...
4/ 页面标题将使用 $('title').html(myTitle)...
更新
5/ 和onpopstate function will defined...
说明：
A=> 标有 (( don't work )) 的立方体，没有任何 target page 与 Ajax request，所以它们会破坏页面，点击...！！！
B=> 除了前进按钮之外，Firefox 和 Internet Explorer11 中的每件事都可以正常工作...
现在我对这个页面的问题：
I=>favicon 在google chrome33 和 opera20 和 Internet Explorer11 在Ajax request 之后消失，并且页面标题何时会消失更新...!!!
II=>当我点击back按钮时，页面会正确更新，一切都很好，但是当我点击@ 987654359@，没有任何反应，页面将在没有 css 和 js 文件的情况下加载，当刷新新的转发页面时......！！！
我不确定下一个问题是由于 html5 历史 API，如果是真的，请接受我的道歉。
III=> login form buttons 已禁用google chrome 当 div 全屏时，...?!?!?
IV=> 如上图所示，在里面div.third 鼠标悬停事件不起作用，当 product page 或 articles page 全屏时...( just in chrome )
我知道我的问题很详细，感谢您的关注。
请指导我纠正此错误的正确方法...
我在以下链接中研究了html5 history API：
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 -----/*/
});
【问题讨论】：
-
您可能想问四个不同的问题。您需要为每个人提供相关代码，a link is not sufficient
-
有超过 7 个文件，数千行，由于站点限制，我无法添加更多...您可以使用
firebug和developer tools来查看所有文件，如果你想帮忙... -
@Kiyarash 请看帖子。感谢分享。希望这会有所帮助。
-
我也面临同样的问题..你找到答案了吗？
标签： javascript jquery ajax html html5-history