今天遇到一个问题,之前给整个网站上的链接加了loading,今天遇到在ios的chrome和safari下点击进入新页面然后点击浏览器的返回按钮,loading还在,并且一直存在,最后网上搜到了解决方案特记录下
点击事件加loading:
$(document).on("click", "a[href!=''][href!='#'][href!='javascript:void(0)'][href!='javascript:void(0);'][href!='javascript:;']", function () {
var href = $(this).attr('href');
var target = $(this).attr('target');
var a_pageindex = $(this).data("pageindex");
if ($(this).hasClass('fancybox')) {
//弹出层的不loading
} else if (target != undefined && target == "_blank") {
//有_blank的不loading
} else if (href == undefined || href.indexOf("plus.google.com") > 0) {
//没有href的不loading 或者google分享不loading
} else if ($(this).data("pageindex") != undefined) {
//ajax 分页空间的分页按钮不需要
} else if (isCtrl) {
//如果按着ctrl键不执行
} else {
//href中以#开头的不loading
if (href.substring(0, 1) != '#' && href.indexOf("javascript:") == -1) {
LinkLoading(true);
}
}
});
解决ios的chrome和safari返回继续loading:
//瀏覽器回退頁面一直轉圈 if ($(window).width() < 1024) { var detectBack = { initialize: function () { //监听hashchange事件 window.addEventListener('hashchange', function () { //为当前导航页附加一个tag this.history.replaceState('hasHash', '', ''); }, false); history.pushState(1, '', '') window.onpopstate = function (e) { if (!e.state) {
//fix chrome window.history.back(); //侦测是用户触发的后退操作, dosomething //这里刷新当前url //window.location.reload(); } }; } } detectBack.initialize(); //fix ios safair window.onpageshow = function (event) { if (event.persisted) { window.location.reload() } }; }
最后经过试验,不管chrome还是safari这样就可以了
//瀏覽器回退頁面一直轉圈 if ($(window).width() < 1024) { window.onpageshow = function (event) { if (event.persisted) { LinkLoading(false);
//下边的看情况添加
//location.reload();
}
};
}
定义和用法
onpageshow 事件在用户浏览网页时触发。
onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。
为了查看页面是直接从服务器上载入还是从缓存中读取,你可以使用 PageTransitionEvent 对象的 persisted 属性来判断。 如果页面从浏览器的缓存中读取该属性返回 ture,否则返回 false
参考:https://code.ziqiangxuetang.com/jsref/event-onpageshow.html