IE6下<a> 导致http请求被aborted
今天测试说发现一个在IE6下的问题,查了一下终于发现原因决定还是将它记录下来虽然IE6行将就木了。
异常现象:
通过js生成了ul树结构,点击树节点,调用隐藏的asp:button的click方法产生回发调用服务端事件。显示对应树节点分类明细数据表格,表格通过 Reapter产生。在ie8,9,chrome下均通过了测试。 如下图
可是在IE6下却发生了一件诡异的现象。点击树节点之后所有的javascript代码也按堆栈执行完成。并且也成功回发至了服务端。并且通过设置断点也发现服务端的代码也全部执行结束。可是当整个http流程结束后却发现,Reapter并没有按照我们所设想的呈现出来。
分析问题:
当发现所需要的数据并没有出现在眼前时,第一反应就是右击查看HTML源代码。让我惊讶的Reapter并没有产生任何一行HTML。一开始按常理分析。
1.服务端问题,因为服务端没有将所需要的html文本返回。
2.只有IE6的所调用后,服务端才会出现此问题。
由于一开始错误思路导致了google了一会也没有发现很合理的解释与解决方案。因为毕竟已经调试过aspx页面的所有生命周期都走过连unload都执行了。而且数据源也是有数据的。所以开始怀疑自己的思路有错。
那既然服务端已经正常执行了所有的生命周期,那肯定也产生了对应的HTML文本。那会不会是浏览器无法接收此文。于是想到打开了httpwatch。
果然在httpwatch中发现了一个很重要信息。通过回发的post请求被Aborted掉了如下图:
于是google下ie6 aborted的原因。
原文大意是,IE6的一个特定BUG。如果点击过 <a> 元素,并触发onclick事件的话,将会引起http请求的aborted。
解决方案:
本人并没有使用原文中的解决方案,当然原文中的解决方案也许更好。不过我猜测也许是在同一函数中触发回发事件才会引起aborted的。如果将执行的onclick事件函数同submit到服务端的函数分离开。也许就可以解决这个问题。
以下解决的代码:
function TreeNodeclick(){
//....一系列的业务逻辑
//调用隐藏的button click函数
//修改前代码 document.getElementById("submitButton").click();
//修改后代码
window.setTimeout(function(){
document.getElementById("submitButton").click();
},10)
}
至此顺利解决IE6下的这个小BUG。关键是使用httpwatch发现了aborted。至于为什么会考虑IE6,因为企业软件目前还无法做到忽视IE6!
其实这个BUG同IE6下另外一个由于<a>引起的BUG类似。同样附带上该问题解决方案
《 IE6下onclick事件失效问题 》{
A:<input type="button" value="新增" onclick="add();"/>
B:<a href="javascript:void(0);" onclick="funs.add();">添加</a>
IE6下A可以正常执行onclick事件,而B却不可以。只能说IE6真让人头疼。
解决方案:
1:把B改成A的形式
2:把B中的javascript:void(0);改为"#"或"###"
3:把B中的onclick后面加个return false.
}