探讨链接a

探讨链接a

http://bazhuang.javaeye.com/blog/548381

 

谈谈对A的认识 
在web开发中,打交道比较多的除了按钮就是a了, 一般的交互我们基本上都是采用这2种方式进行的,这次就来认识一下a吧。 

Html代码 
  1. <a href="http://www.javaeye.com" onclick="return openwin()" target="_self">打开javaeye</a>  



a中最重要的就是这3个属性定义了:href、target、onclick。一般的跳转href和target都是配合使用的。 
1、target有4个值,分别为_self(默认)、_blank、_top、_parent。 
_blank是弹出新窗口显示内容, 
_top和_parent是在iframe中才起作用,目的是在顶层刷新(_top),或者是在父页面刷新(_parent),注意:如果没有找到也不会报错,效果就和_blank一样了,新窗口显示内容。 

其实target也是可以写其他内容的,例如: 

Html代码 
  1. <a href="http://www.sohu.com" target="main">搜狐</a>  

,那么,它就会去找name为main的iframe,在该iframe显示http://www.sohu.com的内容。如果没有这个main的话,就和_blank一样。 

2、href 
href是超链接的访问URI,这个不一定非要是http路径,其实浏览器识别href是通过协议进行的, 
1) 如果没有任何协议,例如: 
<a href="www.sohu.com">搜狐</a>,那么它寻找的就是当前路径下的www.sohu.com这个资源,显然我们的目录下应该不会有该资源,那么对不起,它就只能显示“无法显示网页”,url也变为file:///C:/Documents%20and%20Settings/jiwen.chenjw/Local%20Settings/Temp/www.sohu.com了。 

比如我们的应用访问路径是http://localhost/work/sale/index.do,那么该页面定义的<a href="save.do">save</a>访问的就是http://localhost/work/sale/save.do,<a href="../show.do">link</a>,访问的就是http://localhost/work/show.do,<a href="/save.do">save</a>就是从根目录下开始寻找,也就是访问http://localhost/save.do了。 

2) 接下来就应该要说说协议了,常用的协议有http、ftp、javascript,其他还有各种各样的自定义协议了。例如:tencent就是腾讯QQ定义的,如果安装过QQ的话,就会响应相对应的程序。 
http是我们最常用的一个协议了,大部分时候我们的程序都没有指定这个协议,它就是依据当前应用程序访问的协议。例如:我们的程序访问url为http://localhost/work/index.do,那么页面上<a href="show.do">,我们去访问的时候会变为访问http://localhost/work/show.do,会继承当前页面的协议。 

javascript这个协议应该是我们最常用的一个了,在处理链接的时候,大部分都是需要调用其他js函数进行处理,例如: 

Html代码 
  1. <a herf="javascript:addUser();">添加用户</a>  
  2. <script>  
  3. function addUser(){  
  4.     var form1 = document.getElementById("form1");  
  5.     form1.action="addUser.do";  
  6.     form1.target="_blank";  
  7.     form1.submit();  
  8. }  
  9. </script>  



第二种写法就是 

Html代码 
  1. <a href="javascript:window.open('http://www.sohu.com')">添加用户</a>  



还有一种写法就是 

Html代码 
  1. <a href="javascript:void(0)" onclick="addUser();">添加用户</a>  



这里就引入了onclick事件,上面3种方式都可以做到弹出新窗口进行添加用户操作。那么到底有什么区别呢? 
(1)使用javascript:window.open()这种方式,在不同浏览器有不同的效果,ie和Firefox都可以弹出新窗口显示www.sohu.com的内容,而当前窗口的内容就显示为[object](IE6)以及[object Window](Firefox)。因为window.open是带有返回值的,而href就是获取返回值显示的。所以直接在href中使用window.open是不推荐的。 
我们可以修改为第一种方式。 

(2)第三种方式,我们是最常用的,但也会有问题,页面html代码如下: 

Html代码 
  1. <script>  
  2.   function openwin(){  
  3.     var form1 = document.getElementById("form1");  
  4.     form1.target="_blank";  
  5.     form1.submit();  
  6.   }  
  7.   </script>  
  8. <a href="javascript:void(0)" onclick="openwin()">打开javaeye</a>  
  9. <form action="http://www.javaeye.com" method="post" id="form1">  
  10. </form>  



在ie6、firefox中测试没有问题,可以点击多次,而在google chrome浏览器中就只能打开一次,影响用户使用。 
第一种方式也同样有这种问题。问题出在哪里呢? 
不论是第一种还是第三种,其实都是执行了2次action,一次是openwin中打开新的页面,一次是执行void(0)或者是执行addUser的返回值,而void(0)和addUser的返回值都是为空,所以页面没有变化。这样就可以解释<a href="#" onclick="openwin()">打开javaeye</a>会跳到页面头部去,同时也会执行onclick的事件。 

那我们有没有办法只执行一次呢,也就是只执行openwin这个函数,而不去触发href呢,第一种方式显然不行。 
我们修改html代码如下: 

Html代码 
  1. <script>  
  2.   function openwin(){  
  3.     var form1 = document.getElementById("form1");  
  4.     form1.target="_blank";  
  5.     form1.submit();  
  6.     return false;  
  7.   }  
  8.   </script>  
  9. <a href="http://www.sohu.com" onclick="return openwin()">打开javaeye</a>  
  10. <form action="http://www.javaeye.com" method="post" id="form1">  
  11. </form>  



如果onclick="openwin()"那么我们会发现当前页面也同时跳转到搜狐首页去了,当我们修改为onclick="return openwin()",会发现这个页面就不会跳转。 
这样就可以知道如果onclick的返回值如果为false,那么就不会触发href。 

但上面的代码在chrome中只有第一次点击的时候才有效,原因呢?我们大概可以想到估计是和Ajax的处理原则一样,是不是因为form的action没有发生变化才导致的呢,那我们把代码修改为如下: 

Html代码 
  1. <script>  
  2.   function openwin(){  
  3.     var form1 = document.getElementById("form1");  
  4.     form1.action="http://www.javaeye.com?date="+new Date().getTime();  
  5.     form1.target="_blank";  
  6.     form1.submit();  
  7.     return false;  
  8.   }  
  9.   </script>  
  10. <a href="http://www.sohu.com" onclick="return openwin()">打开javaeye</a>  
  11. <form action="http://www.javaeye.com" method="post" id="form1">  
  12. </form>  


在chrome中测试成功。 

总结一下: 

Html代码 
  1. <script>  
  2.   function openwin(){  
  3.     var form1 = document.getElementById("form1");  
  4.     form1.action="http://www.javaeye.com?date="+new Date().getTime();  
  5.     form1.target="_blank";  
  6.     form1.submit();  
  7.     return false;  
  8.   }  
  9.   </script>  
  10. <a href="http://www.sohu.com" onclick="return openwin()">打开javaeye</a>  
  11. <form action="http://www.javaeye.com" method="post" id="form1">  
  12. </form>  




页面中的代码处理如上所示,在onclick中获取返回值为false,也可以这样写onclick="openwin();return false;"但不太直观,还是建议如上写法。 
解释一下为什么href不设置为javascript:void(0)呢,主要是让用户在关闭Javascript功能的时候点击该链接有响应,使用Javascript的原则就是尽量少用js。

 

 

 

 

window.location.href不起作用的原因分析

http://blog.csdn.net/myyate/archive/2008/01/24/2062588.aspx

今天写了个跳转的js,用到了window.location.href,代码如下:

     function showEnquiryListByType(typeId){
          
var uUrl="/Enquiry/list/?type=enquery&calss="+typeId;
          alert(uUrl);
          window.location.href
=uUrl;
    }

 

     上面的alert(uUrl);是不跳转后用来调试的,页面反映为现实uUrl的值,但不进行跳转,分析思路是window.location.href出问题,所以尝试了常用的调试方式,比如:

     判断是否是在包含页里面:采用

           window.parent.location.href=uUrl; //这个完全否决,因为不是这种情况

     采用 window.href location.href document.href均无效

     于是跳出判断函数内部出错,分析页面出发该函数的事件,原来是这样的:

          <a href="javascript:void(0)" onclick="showEnquiryListByType('12120015')">

     发现问题:<a href="javascript:void(0)" ,于是修改为:

          <a href="javascript:showEnquiryListByType('12120015')">

     于是一切正常!

    为什么会发生这个问题呢?我们来看看javascript:void(0) :

    JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。

    void 操作符用法格式如下: 
        1. javascript:void (expression)
        2. javascript:void expression 

    expression 是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。 (实现版本 Navigator 3.0 )

    你可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。

    下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。

    <A HREF="javascript:void(0)">单击此处什么也不会发生</A>

    下面的代码创建了一个超级链接,用户单击时会提交表单。

    <A HREF="javascript:void(document.form.submit())">
单击此处提交表单</A>

 

posted @ 2010-01-20 10:12  hellofei  阅读(811)  评论(0编辑  收藏  举报