IE6下window.location.href不跳转到相应url
前天一同事遇到个看似很诡异的问题，就是<a href="javascript:void(0);" onclick="window.location.href=url"></a>在IE6下面没反应，不跳转到onclik事件中的"window.location.href"。
当时我们在网上找了篇文章很快就解决了，但是文章中没有说明具体原因在哪里,只是说在"window.location.href"后面加一个"return false"，当时马上建了个test.html，试了下确实可以，而且试了之后还发现IE6下是被href="javascript:void(0)"覆盖了，这问题看上去很简单，但是为什么其他浏览器没有被覆盖，但对原因到底在哪里还是一头雾水。
为了更深入地去研究<a>中href和和onclik的执行到底是神马个情况，做了以下试验，试验所用的浏览器是IE6、7、8和Firefox8.0.1。为了视觉上更好的观察，我们将a的样式设置为"display:block;line-height:28px"；为了观察href和onclik是否都执行了，我们将<a>属性设置target="_blank"，因为它只对a中的href链接起作用，即打开href中的链接会新增一个窗口；为了观察onclik和href的执行顺序，我们在为设置"return false"的onclik事件后面添加"alert('怎么执行')"，因为alert会中断所有浏览器线程。以下是试验代码：
|
1
2
3
4
5
6
7
8
|
<html> <head> <style> a{display:block; line-height:28px} p{margin: 3px 0 12px;} </style> </head><body> |
A:
|
1
|
<a href="javascript:void(0);" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')" target="_blank">点击A</a> |
点击A后，IE中url马上变成了http://www.fclub.cn，然后弹窗，把弹窗点掉后当前页面马上进入了聚尚网首页，最后再新打开一个地址为javascript:void(0)的空页面；在Firefox中，当前页的url也马上变成了http://www.fclub.cn，然后弹窗，不同的是，弹窗没有完全阻断UI线程，自动跳转到了聚尚网首页，并且没有新打开一个地址为javascript:void(0)的页面。
B:
|
1
|
<a href="javascript:void(0);" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')">点击B</a> |
点击B后，在IE6中，浏览器任务框中的url马上变成了http://www.fclub.cn，然后弹窗，点掉弹窗后，当前页面url变成了javascript:void(0)，进入一个空白页；IE6以上版本，点击后url变成了http://www.fclub.cn，然后弹窗，点掉弹窗后进入聚尚网首页；在Firefox中，表现和A中一样。
C:
|
1
|
<a href="#" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')" target="_blank">点击C</a> |
点击C后，在IE各版本都是url马上变成了http://www.fclub.cn，然后弹窗，点掉弹窗后，在另一个窗口打开一个新的聚尚网首页；在Firefox中，表现和A中一样。
D:
|
1
|
<a href="#" onclick="window.location.href='http://www.fclub.cn';return false" target="_blank">点击D</a> |
点击D后，IE各版本和Firefox都是直接进入了聚尚网首页。
E:
|
1
|
<a href="javascript:void(0);" onclick="window.location.href='http://www.fclub.cn';return false" target="_blank">点击E</a> |
点击E后，IE各版本和Firefox都是直接进入了聚尚网首页。
F:
|
1
|
<a href="http://www.google.com" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')" target="_blank">点击F</a> |
点击F后，IE各版本都是当前页url变成http://www.fclub.cn，然后弹窗，点掉弹窗后当前页进入了聚尚网首页，并且新打开一个Google页面；Firefox中，先是url变成http://www.fclub.cn，然后弹窗，点掉弹窗后，当前窗口进入聚尚网首页，与IE不同的是，不以任何形式打开Google首页。
G:
|
1
|
<a href="http://www.google.com" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行');return false" target="_blank">点击G</a> |
点击G后，IE各版本都是当前页url变成http://www.fclub.cn，然后弹窗，点掉弹窗后当前页进入了聚尚网首页，没有新打开一个Google页面；Firefox中，表现和F一样。
H:
|
1
|
<a href="http://www.google.com" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')" target="_blank">点击H</a> |
点击H后，IE各版本及Firefox表现和G一样。
I:
|
1
|
|
点击I后，IE各版本及Firefox都没有任何，href也都没有执行。
J:
|
1
|
|
点击J后，IE各版本和火狐都是先弹窗，点掉弹窗后，在新的页面中打开Google首页。
总结：通过A-J这11个试验用例我们可以发现以下情况：
1、通过弹窗和打开新页面的顺序可以发现，在IE各个版本和Firefox中，都是先执行onclick事件，再执行href，onclick事件的优先级高于href。
2、在Firefox中，如果onclick中有可用的"window.location.href"，则直接进入"window.location.href"中的url链接，不再执行<a>标签中的href，如果onclik中无可用"window.location.href"，则会进入<a>标签中href中的链接。
3、通过I以及其他onclick中有"return false"试验用例的表现，可以看出，href的执行被onclik中的return false阻断了。
4、在IE各个版本中如果<a>标签中"target=_self"，则最后进入的是href中的有效url。
5、当href中的值只是锚点或空，则IE各版本和Firefox都不会把它当作链接处理，即不会进入href的值。但是当href="javascript:void(0)"，IE6会把它当作有效url处理，而进入url="javascript:void(0)"的一个空页面，IE6以上版本和Firefox则把不它当作有效url处理。
IE6下window.location.href不跳转到相应url的更多相关文章
- JavaScript在IE6下超级链接window.location.href不跳转的bug 及 解决方案
今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url" ...
- 关于window.location.href页面跳转的坑
"window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...
- window.location.href无法跳转
onclick事件存在事件冒泡 所以要阻止它冒泡 解决:在onclick事件里添加return false阻止冒泡:onclick="window.location.href='XXXXX. ...
- html中submit和button的区别/ window.location.href 不跳转 的问题
<input type="button"> <input type="submit"> 这两个的区别 是 button 不会自动提交表 ...
- 微信BUG之微信内置的浏览器中window.location.href 不跳转
最近做微信开发遇到这个问题,查了一些文档,总结一下 1.url后面加参数 indow.location.href = url +'?timestamp='+ new Date().getTime()+ ...
- window.location.href无法跳转的解决办法
-------------------接收别人做的SSO单点登录项目,无源码,只是点击登出按钮一直不跳转. 原因是: <a href="javascript:;" oncli ...
- 遇到问题-----JS中设置window.location.href跳转无效(在a标签里或这form表单里)
问题情况 JS中设置window.location.href跳转无效 代码如下: ? 1 2 3 4 5 6 7 8 <script type="text/javascript&quo ...
- javascript 中设置window.location.href跳转无效问题解决办法
javascript 中设置window.location.href跳转无效问题解决办法 问题情况 JS中设置window.location.href跳转无效 原因是 a标签的href跳转会执行在wi ...
- window.location.href跳转无效
window.location.href跳转无效 问题情况 JS中设置window.location.href跳转无效 原因是 a标签的href跳转会执行在window.location. ...
随机推荐
- MyEclipse安装插件的几种方法 转
http://www.cnblogs.com/pharen/archive/2012/02/08/2343342.html MyEclipse安装插件的几种方法 本文讲解MyEclipse(MyEcl ...
- MYSQL router 自动均衡负载
配制文件: /etc/mysqlrouter/mysqlrouter.ini [DEFAULT] logging_folder = /var/log/mysql-router plugin_folde ...
- 三大文本处理工具grep、sed及awk的简单介绍
grep.sed和awk都是文本处理工具,虽然都是文本处理工具单却都有各自的优缺点,一种文本处理命令是不能被另一个完全替换的,否则也不会出现三个文本处理命令了.只不过,相比较而言,sed和awk功能更 ...
- 增加字段关联插件 For PHPCMS V9 免费版
增加字段关联插件 For PHPCMS V9 免费版 第一:增加字段选择关联 第二:关联后的效果 烈火下载友情提示:增加方法详见附件内的说明文档. 附件下载
- Laravel 5.1中 Redis 的安装配置及基本使用教程
关于Redis的介绍我们在之前Laravel 缓存配置一节中已有提及,Redis是一个开源的.基于内存的数据结构存储器,可以被用作数据库.缓存和消息代理.相较Memcached而言,支持更加丰富的数据 ...
- 最小K个数之和
描述 输入n个整数,输出其中最小的K个数之和.例如输入4,5,1,1,6,2,7,3,3这9个数字,当k=4,则输出最小的4个数之和为7(1,1,2,3). 输入 测试样例组数不超过10 每个测试案例 ...
- AJAX XMLHttpRequest
<html> <head> <title>XMLHTTPRequest对象的说明DEMO</title> <script language=&qu ...
- A simple way for hover pop bootstrap nav-menu
.navbar .nav > li .dropdown-menu { margin:; } .navbar .nav > li:hover .dropdown-menu { display ...
- 给jdk写注释系列之jdk1.6容器(13)-总结篇之Java集合与数据结构
是的,这篇blogs是一个总结篇,最开始的时候我提到过,对于java容器或集合的学习也可以看做是对数据结构的学习与应用.在前面我们分析了很多的java容器,也接触了好多种常用的数据结构,今天 ...
- centos 安装 acrobat Reader之后
IV: 为Firefox等浏览器安装Acrobat Reader插件:sudo /usr/local/Adobe/Acrobat7.0/Browser/install_browser_plugin按照 ...