今天遇到一个问题,之前给整个网站上的链接加了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

给页面点击链接加了转圈圈和解决遇到的bug的更多相关文章

  1. //点击按钮加减音频音量到最小会出现bug什么意思???

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. iOS实现在webview页面内点击链接,跳转指定App

    早上和UI刚谈到这个需求,然后自己试了一下,发现还是蛮简单的,记录一下: 思路分析: iOS内应用之间跳转都会用到 URL Schemes这个东西,简单的讲,这个就是用来定义app身份的一个id识别, ...

  3. ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml) 用javascript在客户端删除某一个cookie键值对 input点击链接另一个页面,各种操作。 C# 往线程里传参数的方法总结 TCP/IP 协议 用C#+Selenium+ChromeDriver 生成我的咕咚跑步路线地图 (转)值得学习百度开源70+项目

    ASP.NET MVC WebApi 返回数据类型序列化控制(json,xml)   我们都知道在使用WebApi的时候Controller会自动将Action的返回值自动进行各种序列化处理(序列化为 ...

  4. hexo next主题中关于pc端点击链接没问题,移动端点击链接页面不显示。

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景 hexo next主题,本人diy的时候 ...

  5. 让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成

    让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边     点击链接后不跳转可以设置成     1.<a href="javascri ...

  6. 用A标签实现页面内容定位 点击链接跳到具体位置

    经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了.实例参考微信营销理论手册的目录. 首先用A标签定义目录的链接. & ...

  7. js-禁止微信H5页面点击右上角菜单时出现“复制链接”,且分享仅支持微信分享

    禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...

  8. 在Chrome浏览器中点击链接,打开IE浏览器,跳转到指定页面并传递参数

    需求: 在Chrome浏览器中点击链接,打开IE浏览器,跳转到指定页面并传递参数 过程: 一些应用软件可以通过点击URL链接启动并执行操作(例如迅雷),这是如何做到的呢? 主要是通过修改注册表,注册U ...

  9. c# webbrowser 随机点击链接

    HtmlElementCollection hec = webBrowser1.Document.All; ; i < hec.Count; i++) { if (hec[i].GetAttri ...

随机推荐

  1. django-debug-toolbar和Django 日志配置

    django-debug-toolbar介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. gith ...

  2. VC6.0学习C语言入门SDK

    度网盘链接 VC6.0    密码:t6bd VS2010 密码:3of2 C语言入门教程 在线视频地址(PS此链接摘抄至博主lellansin) Acfun.tv:http://www.acfun. ...

  3. IDEA常用配置

    一.安装Activiti 1.File -> Settings -> Plugins -> 搜索actiBPM 2.解决中文乱码问题 修改IDEA的安装目录中的idea.exe.vm ...

  4. 测试中,重现偶发的BUG问题。

    1.严格按用例执行: 2.如果是作随机测试时,把测试步骤的点进行速记; 3.偶发BUG一般都是严重的,保留现场,让开发人员一起分析留下的现场(如数据的变化,界面窗口的变化等,找出问题的引子,那怕是千丝 ...

  5. js数组去除重复

    1. let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4]; let result = arr.sort().reduce((init, current)=>{ if(in ...

  6. 让资源管理器变得像Chrome一样标签化

    让资源管理器变得像Chrome一样标签化 前段时间WIn10开发者预览版发布了更新通知,其中一个主要特性就是给资源管理器添加了标签化的功能. 习惯了各种浏览器便捷的标签化管理,早就想要这个实用的功能了 ...

  7. Word2vec的Skip-Gram 系列1

    转自雷锋网的一篇很棒的文章,写的通俗易懂.自己消化学习了.原文地址是 https://www.leiphone.com/news/201706/PamWKpfRFEI42McI.html 这次的分享主 ...

  8. C# Xamarin For Android自动升级项目实战

    一.课程介绍 “明人不说暗话,跟着阿笨一起玩Xamarin”,本次分享课程阿笨将带来大家一起学习Xamarin For Android系列<C# Xamarin For Android自动升级项 ...

  9. Sublime Text 显示韩文和文件编码

    菜单  Preferences –> Settings 右侧的User {    "font_size": 12,    "show_encoding": ...

  10. Java全栈程序员之06:IDEA中MAVEN项目依赖及运行

    MAVEN已经成为事实上的企业项目开发中的项目类型.无论是IDEA还是Eclipse,都已经默认支持创建MAVEN项目.严格意义上来说,MAVEN不是一种新的JavaEE项目类型.它凌驾于所以的项目类 ...