iOS safari 4.2.1 中的 HTML5 历史记录被破坏,旧的 webkit 错误?
在常规的 safari 中,我的脚本更改了页面 window.history.pushState 的 url,并且效果很好,但在 ios 中,不知怎的,加载的 URL 是最后一页的 URL...这真的令人沮丧!这是一个错误吗?
感谢您的帮助:)
这是代码:
function hijackLinks() {
$('a').live("click", function (e) {
e.preventDefault();
loadPage(e.target.href);
$(this).addClass('click');
});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {$('a').live("touchstart", function (e) {
direction = $(this).attr('class');
$(this).addClass('temp');
setTimeout(function () {
$('.temp').addClass('click');
}, 100);
});
$('a').live("touchmove", function (e) {
$('.temp').removeClass('temp');
setTimeout(function () {
$('.click').removeClass('click');
}, 1);})
$('.click').live("touchend", function (e) {
setTimeout(function () {
$('.click').removeClass('click');
}, 1);})}
else{
$('a').live("mouseenter", function (e) {
direction = $(this).attr('class');
$(this).addClass('click');})
$('a').live("mouseleave", function (e) {
$(this).removeClass('click');})
}
}
function loadPage(url) {
if (url === undefined) {
$('body').load('url', 'header:first,#content,footer', hijackLinks);
} else {
$.get(url, function (data) {
$('body').append(data);
sm = $(window).width();
sn = $(window).scrollTop();
window.scrollTo(0,0);
window.history.pushState(null, null, url);
if (direction === "leftnav") {
$('body>header:last,body>#content:last,footer:last').css("-webkit-transform", "translate( -" + sm + "px,0px)");
footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true);
$('footer:last').css("top", footerheight);
$('body>header,body>#content,footer').css("-webkit-transition-duration", "0.5s");
$('body>header:first,body>#content:first,footer:first').css("-webkit-transform", "translate(" + sm + "px,0px)");
$('body>header:last,body>#content:last,footer:last').css({"-webkit-transform": "translate(0,0)"});
}
if (direction !== "leftnav") {
$('body>header:last,body>#content:last,footer:last').css("-webkit-transform", "translate(" + sm + "px,0px)");
footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true);
$('footer:last').css("top", footerheight);
$('body>header,body>#content,footer').css("-webkit-transition-duration", "0.5s");
$('body>header:first,body>#content:first,footer:first').css("-webkit-transform", "translate( -" + sm + "px,0px)");
$('body>header:last,body>#content:last,footer:last').css("-webkit-transform", "translate(0,0)");
}
setTimeout(function () {
$('body>header:not(:last),body>footer:not(:last),body>#content:not(:last)').remove();
$('body>header,body>footer,body>#content').removeAttr('style');
},1000);
});
}
}
$(document).ready(function () {
loadPage();
});
window.addEventListener("popstate", function(e) {
loadPage(location.pathname);
});
In regular safari my script changes the url of the page window.history.pushState and that works just fine but in ios, somehow the URL that gets loaded it that of the last page... It is really frustrating! is this a bug?
Thanks for your help :)
here is the code:
function hijackLinks() {
$('a').live("click", function (e) {
e.preventDefault();
loadPage(e.target.href);
$(this).addClass('click');
});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {$('a').live("touchstart", function (e) {
direction = $(this).attr('class');
$(this).addClass('temp');
setTimeout(function () {
$('.temp').addClass('click');
}, 100);
});
$('a').live("touchmove", function (e) {
$('.temp').removeClass('temp');
setTimeout(function () {
$('.click').removeClass('click');
}, 1);})
$('.click').live("touchend", function (e) {
setTimeout(function () {
$('.click').removeClass('click');
}, 1);})}
else{
$('a').live("mouseenter", function (e) {
direction = $(this).attr('class');
$(this).addClass('click');})
$('a').live("mouseleave", function (e) {
$(this).removeClass('click');})
}
}
function loadPage(url) {
if (url === undefined) {
$('body').load('url', 'header:first,#content,footer', hijackLinks);
} else {
$.get(url, function (data) {
$('body').append(data);
sm = $(window).width();
sn = $(window).scrollTop();
window.scrollTo(0,0);
window.history.pushState(null, null, url);
if (direction === "leftnav") {
$('body>header:last,body>#content:last,footer:last').css("-webkit-transform", "translate( -" + sm + "px,0px)");
footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true);
$('footer:last').css("top", footerheight);
$('body>header,body>#content,footer').css("-webkit-transition-duration", "0.5s");
$('body>header:first,body>#content:first,footer:first').css("-webkit-transform", "translate(" + sm + "px,0px)");
$('body>header:last,body>#content:last,footer:last').css({"-webkit-transform": "translate(0,0)"});
}
if (direction !== "leftnav") {
$('body>header:last,body>#content:last,footer:last').css("-webkit-transform", "translate(" + sm + "px,0px)");
footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true);
$('footer:last').css("top", footerheight);
$('body>header,body>#content,footer').css("-webkit-transition-duration", "0.5s");
$('body>header:first,body>#content:first,footer:first').css("-webkit-transform", "translate( -" + sm + "px,0px)");
$('body>header:last,body>#content:last,footer:last').css("-webkit-transform", "translate(0,0)");
}
setTimeout(function () {
$('body>header:not(:last),body>footer:not(:last),body>#content:not(:last)').remove();
$('body>header,body>footer,body>#content').removeAttr('style');
},1000);
});
}
}
$(document).ready(function () {
loadPage();
});
window.addEventListener("popstate", function(e) {
loadPage(location.pathname);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论