我正在开发一个基于 Ajax 的网站...
在我的站点中，每个页面都会使用 jQuery Ajax 从其他脚本加载到我的一个 DIV 中...
所以，如你所知，出于某些原因我需要使用 HTML5 History API...
您可以在 THIS LINK... 上找到我的示例页面
我为帮助制作了一些图片，因为我的页面是波斯语，您可能无法理解我的意思..
这是图片:
正如您可能发现的那样，我尝试制作类似 windows8...
故事是这样的:
1/当用户点击立方体时，它们会360 deg 并变成全屏...
2/相关内容将使用jQuery Ajax方法从另一个文件中获取并插入到这个div...
3/location bar hash 会随着HTML5 history API改变--->pushState...
4/页面标题将使用 $('title').html(myTitle)...
更新
5/onpopstate 函数将定义...
描述:
A=> 标记为 (( don't work )) 的立方体没有任何 Ajax 请求的目标页面，所以他们会破坏页面，点击...!!!
B=> 在 Firefox 和 Internet Explorer11 中一切正常，除了前进按钮...
现在我对这个页面的问题:
I=> favicon 在 google chrome33 和 opera20 和 Internet Explorer11 之后消失Ajax 请求 以及页面标题何时更新...!!!
II=> 当我点击 back 按钮时，页面会正确更新并且一切正常，但是当我点击 forward 时，当刷新新的转发页面时，没有任何反应，页面将在没有 css 和 js 文件的情况下加载...!!!
我不确定接下来的问题是因为 html5 history API，如果是真的，请接受我的道歉。
III=> 当 div 全屏时，登录表单按钮 在 google chrome 中被禁用，...?!?!?
IV=> 如上图所示，div.third 鼠标悬停事件不起作用，当 产品页面或文章页面全屏...(仅在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
编辑:
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 -----/*/
});
最佳答案
感谢发布 js。如果可能，可以发布 css 和 html 吗？
不确定每个列出的问题。将尝试解决那些注意到的问题。
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() 没有意识到，一个有效的 jquery method，也就是说，没有出现映射到 jquery 通过 $.fn.extend() http://api.jquery.com/jQuery.fn.extend/ “声明”。此外，rotateY 的 css property 是 transform，而不是 transition。除非不知道已定义 .transition() 方法的特定包含库。
尝试
.css({"transform":"rotateY(360deg)", "-webkit-transform":"rotateY(360deg)"..})
我=>
I=> The favicon disappear in google chrome33 and opera20 and Internet Explorer11 after Ajax request and when the page title will update...!!!-Kiyarash
尝试
<link rel="shortcut icon" src="data:image/png;base64,.." />
或在 (an) $.ajax() callback 中尝试
$("link[rel^=shortcut]").attr("src", "data:image/png;base64,..")
编辑(更新)
也注意到了这篇文章
$('.moraba').fadeIn('fast').each(function(index, element) {
if ( $(this).data('id') == 'undefined' || $(this).data('id') == null ) {
return;
}
else { ..
在 html 文档中，加载了 jquery ("1.10.2")，没有 jquery 的 .data() 方法定义或包含给定元素的值，在控制台，try
$("html").data("id") == "undefined" // -> `false`
$("html").data("id") == undefined // -> `true`
也许一个预期的解决方案是将每个 block 分成单独的“片段”，然后分别测试(调试)？
感谢分享。
希望对你有帮助
关于javascript - 专门在 chrome 中使用 html5 API popState 和 pushState 的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22581885/