zoukankan      html  css  js  c++  java
  • ie 进度条结束不了

    场景:

    在一个用frameset做的主页内,布局如下

    top
    left

    right-列表


    内容                 |             操作


    xxxxxxx           |           <a href='TagetPage'></a>


    在right窗口内,通过点击a链接,打开一个页面。

    现象:

    打开的页面,进度条一直在跑,永远不会结束。

    原因查找:

    1,怀疑目标页TagetPage内部有问题,

    实验:将TagetPage页面内部内容全部删除,只剩空白页,

    结果:还是有进度条,排除TagetPage页面的问题

    2,怀疑frameset的问题,

    实验:单独打开right页面,再点击a链接,

    结果,进度条没问题,至少frameset有部分原因。但是frameset是必须的,不能去掉,继续找问题

    3,怀疑a链接的写法有问题

    实验:尝试增加target,没用。改用onclick,和window.location跳转,成功

    结果:和超链接有关

    4,因为进度条只在ie下有,但ie没有任何错误提示,也不好调试,而进度条可能表示正在和服务器通信。将页面放在chrome下检查网络通信。

    为了减少通信数量,将TagetPage页面换成空白页,得到结果

    红色请求是一张用base64的方式存储的图片,可以看到status是canceled,因为targetpage没有请求,可以确定,该请求来自前一个页面。

    通过查询找到这张图片是列表的选中样式,也就是选中列表的某一行时,会把该行的背景改成这张图片,

    而点击列表内的超链接会将点击事件冒泡至列表的行上,触发了行选中事件,此时会请求此图片

    5,推测和这张图片有关,

    实验:将图片换成用地址加载的方式,不再使用base64保存在css文件内

    结果:ie8下的进度条问题解决!ie7问题依旧

    其实未解决问题


    继续研究,为什么用onclick没事?

    6,继续回到chrome观察请求,结果

    发现,仍然有坏请求。

    实验:在服务器端截获请求,查看请求内容。

    结果:在点击a链接后,截获的第一个请求是图片的请求,而查看Response.IsClientConnected,是false,

    下一个请求TargetPage的请求,Response.IsClientConnected是true,

    应该是服务器发现请求图片的页面已经关闭了,拒绝了此请求。

    但是ie已经不会出现进度条结束不了的问题,那换成base64的图片会怎么样?

    7,换回base64的图片,在服务器端截获,发现没有图片的请求,但在客户端可以看到请求的信息,

    推测base64的图片是浏览器自己解析的,但伪造了一次通信来返回图片,而ie在处理找不到请求页面的base64图片时有问题

    ie对于这种坏请求,总是无限等待,不管是伪通信还是真通信,造成进度条结束不了

    8,从onclick的方向看这个问题:

    点击超链接产生的事件顺序:onclick>冒泡>href

    在onclick中直接跳转,不会再冒泡,没有触发行选中事件,也不会加载图片

    通过href跳转的话,之前会冒泡至行选中,然后请求图片,然后跳转,因为请求图片是异步的,所以在页面跳转后才完成,

    看请求的详细:

    1. Request URL:http://localhost/SL/Scripts/flexigrid/css/images/hl.png
    2. Request Headers
      1. Referer:http://localhost/SL/TargetList
      2. User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

    正常的请求:

    1. Request URL:http://localhost/SL/Scripts/flexigrid/css/images/hl.png
    2. Request Method:GET
    3. Status Code:200 OK
    4. Request Headersview 
      1. Accept:*/*
      2. Accept-Charset:GBK,utf-8;q=0.7,*;q=0.3
      3. Accept-Encoding:gzip,deflate,sdch
      4. Accept-Language:zh-CN,zh;q=0.8
      5. Connection:keep-alive
      6. Cookie:
      7. Host:localhost
      8. Referer:http://localhost/SL/TargetList
      9. User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.52 Safari/537.17

    暂时不知道,浏览器怎么生成的这些信息,但是应该是缺少了这些信息,才被服务器拒绝了

    9,推测如果阻止a链接的冒泡,触发不了行选中,就应该不会再加载图片,也可以解决问题。

    实验结果,成功

    目前看来,要么改成onclick跳转,要么阻止冒泡

    但是阻止冒泡的话,对弹出遮罩来说不好。


    至于frameset,还没有发现原因


    再次发现此问题,同样是在frameset框架下

    场景是常见的点击左侧菜单,打开右侧页面的页面结构

    发现点击菜单还是会出现背景图片的变化

    而菜单点击也是超链接跳转,

    推测应该是,图片的请求和菜单打开页面的请求同时发出,图片的请求被影响

    通过监视网络请求,发现从请求的详情中看不去有什么问题,

    而且图片的请求也是在页面请求之前,

    然而ie下还是导致进度条结束不了,

    但是只在第一次时出现,下次点击就没事了,因为图片已经缓存,不会再请求

    实验:因为菜单的背景变化是通过js来控制class实现的,

    将背景的变化延时100毫秒,使图片的请求和页面请求出现时间差,

    结果,问题解决


    总结:

    此问题出现的条件:

    1,使用frameset的系统

    2,frameset内通过超链接href跳转页面

    3,超链接在点击的时候有背景图片变化,或其他需要请求服务器资源的动作。(post除外)

    现象:

    在ie下会出现进度条结束不了

    解决方法:

    在两个动作(图片请求和页面跳转),之间选择一个来延时触发

    如:将href跳转改为在onclick内跳转

    或延时图片的请求

    ps:在frameset下尽量不要用href跳转页面

  • 相关阅读:
    Middleware
    Languages
    Errors
    Config
    CLI Console
    Linux远程复制文件
    CentOS下安装Gitlab
    Maven_POM配置结构
    Maven_POM配置详解
    MySQL索引背后的数据结构及算法原理
  • 原文地址:https://www.cnblogs.com/yyjj/p/2993508.html
Copyright © 2011-2022 走看看