zoukankan      html  css  js  c++  java
  • IE6中location不跳转问题

    前天一我遇到个看似很诡异的问题,就是<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和Firefox 8.0.1。为了视觉上更好的观察,我们将a的样式设置为"display:block; line-height:28px";为了观察href和onclik是否都执行了,我们将<a>属性设置target="_blank",因为它只对a中的href链接起作用,即打开href中的链接会新增一个窗口;为了观察onclik和href的执行顺序,我们在为设置"return false"的onclik事件后面添加"alert('怎么执行')",因为alert会中断所有浏览器线程。以下是试验代码:

     1 <html>
     2 <head>
     3 <style>
     4 a{display:block; line-height:28px}
     5 p{margin: 3px 0 12px;}
     6 </style>
     7 </head>
     8  
     9 <body>   
    10 A:  <a href="javascript:void(0);" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')" target="_blank">点击A</a>
    11 <p> 点击A后,IE中url马上变成了http://www.fclub.cn,然后弹窗,把弹窗点掉后当前页面马上进入了聚尚网首页,最后再新打开一个地址为javascript:void(0)的空页面;在Firefox中,当前页的url也马上变成了http://www.fclub.cn,然后弹窗,不同的是,弹窗没有完全阻断UI线程,自动跳转到了聚尚网首页,并且没有新打开一个地址为javascript:void(0)的页面。</p>
    12 B:  <a href="javascript:void(0);" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')">点击B</a>
    13 <p> 点击B后,在IE6中,浏览器任务框中的url马上变成了http://www.fclub.cn,然后弹窗,点掉弹窗后,当前页面url变成了javascript:void(0),进入一个空白页;IE6以上版本,点击后url变成了http://www.fclub.cn,然后弹窗,点掉弹窗后进入聚尚网首页;在Firefox中,表现和A中一样。</p>
    14 </br>
    15  
    16 C:  <a href="#" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')" target="_blank">点击C</a>
    17 <p>点击C后,在IE各版本都是url马上变成了http://www.fclub.cn,然后弹窗,点掉弹窗后,在另一个窗口打开一个新的聚尚网首页;在Firefox中,表现和A中一样。</p>
    18 D:  <a href="#" onclick="window.location.href='http://www.fclub.cn';return false" target="_blank">点击D</a>
    19 <p> 点击D后,IE各版本和Firefox都是直接进入了聚尚网首页。</p>
    20 E:  <a href="javascript:void(0);" onclick="window.location.href='http://www.fclub.cn';return false" target="_blank">点击E</a>
    21 <p> 点击E后,IE各版本和Firefox都是直接进入了聚尚网首页。</p>
    22 </br>
    23  
    24 F:  <a href="http://www.google.com" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')" target="_blank">点击F</a>
    25 <p> 点击F后,IE各版本都是当前页url变成http://www.fclub.cn,然后弹窗,点掉弹窗后当前页进入了聚尚网首页,并且新打开一个Google页面;Firefox中,先是url变成http://www.fclub.cn,然后弹窗,点掉弹窗后,当前窗口进入聚尚网首页,与IE不同的是,不以任何形式打开Google首页。</p>
    26 G:  <a href="http://www.google.com" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行');return false" target="_blank">点击G</a>
    27 <p>点击G后,IE各版本都是当前页url变成http://www.fclub.cn,然后弹窗,点掉弹窗后当前页进入了聚尚网首页,没有新打开一个Google页面;Firefox中,表现和F一样。</p>
    28 H:  <a href="http://www.google.com" onclick="window.location.href='http://www.fclub.cn';alert('怎么执行')" target="_blank">点击H</a>
    29 <p> 点击H后,IE各版本及Firefox表现和G一样。</p>
    30 </br>
    31  
    32 I:  <a href="http://www.google.comn" onclick="return false;" target="_blank">点击I</a>
    33 <p> 点击I后,IE各版本及Firefox都没有任何,href也都没有执行。</p>
    34 </br>
    35  
    36 J:  <a href="http://www.google.com" onclick="alert('怎么执行')" target="_blank">点击J</a>
    37 <p> 点击J后,IE各版本和火狐都是先弹窗,点掉弹窗后,在新的页面中打开Google首页。</p>
    38 </body>
    39 </html>
    40  

    总结:通过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处理。

  • 相关阅读:
    LeetCode算法题-Binary Search(Java实现)
    LeetCode算法题-Kth Largest Element in a Stream(Java实现)
    LeetCode算法题-Search in a Binary Search Tree(Java实现)
    LeetCode算法题-Degree of an Array(Java实现)
    LeetCode算法题-Count Binary Substrings(Java实现)
    LeetCode算法题-Binary Number with Alternating Bits(Java实现)
    之前见汤姆大叔 写过一系列的 js 深入理解 呢 很是感觉经典
    xsd 和 wsdl
    发现 一个业务管理系统 解决了 orm 和 前端框架 剩下的 是 业务逻辑 了 。 哈
    uwp 嗯 我最近 准备开发一个 应用 。 嗯 走起
  • 原文地址:https://www.cnblogs.com/lollipop/p/2811236.html
Copyright © 2011-2022 走看看