[英]Back button is not working when using history.pushState() in ReactJs
[英]After pressing back and calling history.back(); History.pushstate isn't instantiated / not working
因此,我正在使用history.js创建某种会影响历史状态的弹出模式。 我正在加载jQuery,然后history.js似乎一切正常,直到我在浏览器中按回去,加载页面,然后用鼠标关闭弹出窗口,然后History无法正常工作,history.pushstate返回null。
这是我的JavaScript代码:
`var urlPath;`
(function(window,undefined){ History.Adapter.bind(window,'statechange',function() { var State = History.getState(); if(State.data.action == "show_popup"){ $('html, body').css({ 'overflow': 'hidden' }); $('.lightbox-dimmer').fadeIn(); $('.lightbox-dimmer').focus(); $('.lightbox-load').fadeIn(); $("#lightbox").load(urlPath+' .halfpage, .sidepage', function() { $('.lightbox-load').fadeOut(); $('.lightbox-warp').fadeIn(); $('.lightbox-dimmer').click(function(event){ if ((!$(event.target).closest('.post-info').length && !$(event.target).closest('.post-auth').length)) { $('.lightbox-dimmer').unbind(); History.back(); } }); }); }else{ History $('html, body').css({ 'overflow': 'auto' }); $('.lightbox-dimmer, .lightbox-warp').fadeOut(); $('.lightbox-dimmer').scrollTop(0);
}});
$('.post-image').click(function(){
urlPath = $(this).attr('href');
if (History.pushState({ action: 'show_popup' } , 'POST TITLE', urlPath)) {
alert('pizza')
}
var State = History.getState();
return false;
});
})(window);`
设法解决了...
$(document).ready(function(){
$('.post-image img').lazyload({
effect : "fadeIn"
});
var $container = $('.posts');
$container.imagesLoaded( function() {
$container.masonry({
itemSelector: '.post',
isOriginLeft: false
});
});
$('.post-image').click(function(){
var urlPath = $(this).attr('href');
History.pushState({state:1}, "State 1", urlPath); //,rand:Math.random()
return false;
});
});
(function(window,undefined){
var History = window.History;
var State = History.getState();
History.Adapter.bind(window,'statechange',function(){
var State = History.getState();
alert(State.data.state);
if(State.data.state == 1){
$('html, body').css({
'overflow': 'hidden'
});
$('.lightbox-dimmer').fadeIn();
$('.lightbox-dimmer').focus();
$('.lightbox-load').fadeIn();
$("#lightbox").load(State.url+' .halfpage, .sidepage', function() {
$('.lightbox-load').fadeOut();
$('.lightbox-warp').fadeIn();
$('.lightbox-dimmer').one('click', function(event){
if ((!$(event.target).closest('.post-info').length && !$(event.target).closest('.post-auth').length)) {
History.pushState({state:2}, "State 2", '/');
}
});
});
}else{
$('html, body').css({
'overflow': 'auto'
});
$('.lightbox-dimmer, .lightbox-warp').fadeOut();
$('.lightbox-dimmer').scrollTop(0);
}
});
})(window);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.