今天遇到一个问题,之前给整个网站上的链接加了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. 自己总结的C#编码规范--2.命名选择篇

    上一篇文章讲了标识符命名的约定,今天讲下标识符命名的选择. 简单的讲,看到一个标识符一定要可以见名知意. 名字一定要能够表达出标识符的含意 标识符名字必须要表达出该标识符的意义,绝对不可以使用无意义的 ...

  2. PHP SOAP

    <?php $classmap = array(); //注意和实例一的不同 $soap = new SoapServer(null, array('uri' => "http: ...

  3. RCNN系列超详细解析

    一.基于Region Proposal(候选区域)的深度学习目标检测算法 Region Proposal(候选区域),就是预先找出图中目标可能出现的位置,通过利用图像中的纹理.边缘.颜色等信息,保证在 ...

  4. Java性能调优zz

    写Java也有n年了,现在还是有不少的坏的代码习惯,也通过学习别人的代码学到了不少好的习惯.这篇文章主要是整理的资料.留给自己做个警戒,提示以后写代码的时候注意!在文章的后面,会提供整理的原材料下载. ...

  5. Java并发编程(五)-- Java内存模型补充

    前面我们已经介绍了:当对象和变量存储到计算机的各个内存区域时,必然会遇到的两个问题及解决方法 共享对象的可见性-- 解决方法:使用java volatile关键字 共享对象的竞争现象 -- 解决方法: ...

  6. Java笔记(五)泛型

    泛型 一.基本概念和原理 泛型将接口的概念进一步延申,“泛型”的字面意思是广泛的类型. 类.接口和方法都可以应用于非常广泛的类型,代码与它们能够操作 的数据类型不再绑定到一起,同一套代码可以应用到多种 ...

  7. MySql主键不区分大小写问题、查询不区分大小写问题

    一.问题一:MySql默认主键不区分大小写 实例: -- 创建混合类型 create table PlainText( Content nvarchar(50) , primary key(Conte ...

  8. 用STM32CudeMX 点亮红色LED灯(软件操作步骤为主)

    1.收获如何使用软件STM32CudeMX配置代码 注意:自己要敲的代码,直接看102行,其他是软件配置的.!!! /** ************************************** ...

  9. js写滚动的文字

    页面中的文字,逐个显示在页面:由于电脑的配置较低,录制的视频相对来说比较卡顿 思路: 用一个定时器将预制的文字通过字符串截取.substring(0, i)方法不断的赋给要显示的区域,i在定时器里面迭 ...

  10. sklearn神经网络分类

    sklearn神经网络分类 神经网络学习能力强大,在数据量足够,隐藏层足够多的情况下,理论上可以拟合出任何方程. 理论部分 sklearn提供的神经网络算法有三个: neural_network.Be ...