IE6下onclick跳转失效问题

最新推荐文章于 2020-05-19 17:34:50 发布

原创最新推荐文章于 2020-05-19 17:34:50 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#a #onclick #href #失效

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了在IE6浏览器中JavaScript页面跳转功能失效的原因，并提供了两种解决方案：通过在`onclick`执行过程中加入`return`语句，或者使用`#`替代`javascript:void(0);`来实现页面跳转。同时，文章强调了解决方案对于用户体验的影响，建议开发者根据实际需求选择合适的方法。

<html>
  <head>
    <title>a_test.html</title>
	
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript">
    function doClick(){
        self.location.href="MyHtml.html";       
    }
    </script>
  </head>
  
  <body>
    <a href="javascript:void(0);" onclick="doClick();">请点击我</a>
  </body>
</html>

这段代码在IE8下没有问题，可以正确跳转到MyHtml.html页面，但是在IE6下面失效了。

网上查了很久，没有找到微软的权威说明，但是这个类似：http://support.microsoft.com/kb/190244/en-us

问题发现了，解决方法有两种：

1. 推荐做法：在onclick执行过程中加return；

<html>
  <head>
    <title>a_test.html</title>
	
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript">
    function doClick(){
        self.location.href="MyHtml.html";       
    }
    </script>
  </head>
  
  <body>
    <a href="javascript:void(0);" onclick="doClick();return false;">请点击我</a>
  </body>
</html>

2. 使用‘#’替代'javascript:void(0);'，但是‘#’会让页面跳转到top，如果页面有较长会导致用户体验差。

<html>
  <head>
    <title>a_test.html</title>
	
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <script type="text/javascript">
    function doClick(){
        self.location.href="MyHtml.html";       
    }
    </script>
  </head>
  
  <body>
    <a href="#" onclick="doClick();">请点击我</a>
  </body>
</html>