探讨链接a

魏祖清

浏览: 180374 次
性别:
来自: 福建

最近访客更多访客>>

xuchong2013

蕃薯耀

yan578351314

woaiwangrong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Chrome JavaScript Firefox QQ 腾讯

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

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

<a href="http://www.iteye.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>

<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，& lt;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>

<a herf="javascript:addUser();">添加用户</a>
<script>
function addUser(){
var form1 = document.getElementById("form1");
form1.action="addUser.do";
form1.target="_blank";
form1.submit();
}
</script>

第二种写法就是
Html代码

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

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

还有一种写法就是
Html代码

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

<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.iteye.com" method="post" id="form1">
10. </form>

<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.target="_blank";
form1.submit();
}
</script>
<a href="javascript:void(0)" onclick="openwin()">打开javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</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.iteye.com" method="post" id="form1">
11. </form>

<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.target="_blank";
form1.submit();
return false;
}
</script>
<a href="http://www.sohu.com" onclick="return openwin()">打开javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</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.iteye.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.iteye.com" method="post" id="form1">
12. </form>

<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.action="http://www.iteye.com?date="+new Date().getTime();
form1.target="_blank";
form1.submit();
return false;
}
</script>
<a href="http://www.sohu.com" onclick="return openwin()">打开javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</form>

在chrome中测试成功。

总结一下：
Html代码

   1. <script>
   2.   function openwin(){
   3.     var form1 = document.getElementById("form1");
   4.     form1.action="http://www.iteye.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.iteye.com" method="post" id="form1">
12. </form>

<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.action="http://www.iteye.com?date="+new Date().getTime();
form1.target="_blank";
form1.submit();
return false;
}
</script>
<a href="http://www.sohu.com" onclick="return openwin()">打开javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</form>

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

分享到：