前天一同事遇到个看似很诡异的问题,就是<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
<a href="http://www.google.comn" onclick="return false;" target="_blank">点击I</a>

点击I后,IE各版本及Firefox都没有任何,href也都没有执行。

J:

1
<a href="http://www.google.com" onclick="alert('怎么执行')" target="_blank">点击J</a>

点击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处理。

转自:http://hoogle.blog.51cto.com/1793311/739022

IE6下window.location.href不跳转到相应url的更多相关文章

  1. JavaScript在IE6下超级链接window.location.href不跳转的bug 及 解决方案

    今天遇到个很诡异的问题,就是<a href="javascript:void(0);" onclick="window.location.href=url" ...

  2. 关于window.location.href页面跳转的坑

    "window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...

  3. window.location.href无法跳转

    onclick事件存在事件冒泡 所以要阻止它冒泡 解决:在onclick事件里添加return false阻止冒泡:onclick="window.location.href='XXXXX. ...

  4. html中submit和button的区别/ window.location.href 不跳转 的问题

    <input type="button">  <input type="submit"> 这两个的区别 是 button 不会自动提交表 ...

  5. 微信BUG之微信内置的浏览器中window.location.href 不跳转

    最近做微信开发遇到这个问题,查了一些文档,总结一下 1.url后面加参数 indow.location.href = url +'?timestamp='+ new Date().getTime()+ ...

  6. window.location.href无法跳转的解决办法

    -------------------接收别人做的SSO单点登录项目,无源码,只是点击登出按钮一直不跳转. 原因是: <a href="javascript:;" oncli ...

  7. 遇到问题-----JS中设置window.location.href跳转无效(在a标签里或这form表单里)

    问题情况 JS中设置window.location.href跳转无效 代码如下: ? 1 2 3 4 5 6 7 8 <script type="text/javascript&quo ...

  8. javascript 中设置window.location.href跳转无效问题解决办法

    javascript 中设置window.location.href跳转无效问题解决办法 问题情况 JS中设置window.location.href跳转无效 原因是 a标签的href跳转会执行在wi ...

  9. window.location.href跳转无效

    window.location.href跳转无效     问题情况 JS中设置window.location.href跳转无效   原因是 a标签的href跳转会执行在window.location. ...

随机推荐

  1. VC++制作DLL具体解释

    1.    DLL的基本概念 应用程序(exe)要引用目标代码(.obj)外部的函数时,有两种实现途径--静态链接和动态链接. 1.    静态链接 链接程序搜索相应的库文件(.lib),然后将这个对 ...

  2. Anaconda packages list

    # packages in environment at D:\Applications\Anaconda3:#alabaster 0.7.6 py35_0 anaconda 2.4.0 np110p ...

  3. Getting Started with Zend Framework MVC Applications

    Getting Started with Zend Framework MVC Applications This tutorial is intended to give an introducti ...

  4. Linux shell 脚本攻略之正则表达式入门

    摘自:<Linux shell 脚本攻略> 下面是类似的解释:

  5. Maven学习小结(五 pom.xml详解[转])

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  6. VMware系统运维(三 )SQL Server 2008 R2安装

    1. 点击"全新SQL Server 独立安装或向现有安装添加功能" 2.验证通过,点击确定. 3.输入数据库密钥,必须支持正版,不然微软打你屁屁,嘻嘻 4.不接受不让你过,所以不 ...

  7. HUST 1017 Exact cover (Dancing links)

    1017 - Exact cover 时间限制:15秒 内存限制:128兆 自定评测 6110 次提交 3226 次通过 题目描述 There is an N*M matrix with only 0 ...

  8. Linux下进程的创建

    这篇文章主要是讲解到Linux进程的控制,包括程序和进程.守护进程.守护进程的出错处理. 1.程序和进程 程序(program)是存放在磁盘文件中的可执行文件,程序的执行实例被称为进程(process ...

  9. StringBuilder 类

    表示可变字符字符串.无法继承此类. 此类表示值为可变字符序列的类似字符串的对象.之所以说值是可变的,是因为在通过追加.移除.替换或插入字符而创建它后可以对它进行修改.有关比较,请参见 String 类 ...

  10. C#电脑自动关机代码指令

    Process p = new Process();//实例化一个独立进程                p.StartInfo.FileName = "cmd.exe";//进程 ...