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跳转页面

 

posted on 2013-04-01 15:04  人在做,人在看  阅读(809)  评论(2编辑  收藏  举报