探討鏈接a

談談對A的認識
在web開發中，打交道比較多的除了按鈕就是a了， 一般的交互我們基本上都是採用這2種方式進行的，這次就來認識一下a吧。

<a href="http://www.iteye.com" οnclick="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也是可以寫其他內容的，例如：

<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函數進行處理，例如：

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

第二種寫法就是

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

還有一種寫法就是

<a href="javascript:void(0)" οnclick="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代碼如下：

<script>
  function openwin(){
	var form1 = document.getElementById("form1");
	form1.target="_blank";
	form1.submit();
  }
  </script>
<a href="javascript:void(0)" οnclick="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="#" οnclick="openwin()">打開javaeye</a>會跳到頁面頭部去，同時也會執行onclick的事件。

那我們有沒有辦法只執行一次呢，也就是隻執行openwin這個函數，而不去觸發href呢，第一種方式顯然不行。
我們修改html代碼如下：

<script>
  function openwin(){
	var form1 = document.getElementById("form1");
	form1.target="_blank";
	form1.submit();
	return false;
  }
  </script>
<a href="http://www.sohu.com" οnclick="return openwin()">打開javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</form>

如果οnclick="openwin()"那麼我們會發現當前頁面也同時跳轉到搜狐首頁去了，當我們修改爲οnclick="return openwin()"，會發現這個頁面就不會跳轉。
這樣就可以知道如果onclick的返回值如果爲false，那麼就不會觸發href。

但上面的代碼在chrome中只有第一次點擊的時候纔有效，原因呢？我們大概可以想到估計是和Ajax的處理原則一樣，是不是因爲form的action沒有發生變化才導致的呢，那我們把代碼修改爲如下：

<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" οnclick="return openwin()">打開javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</form>

在chrome中測試成功。

總結一下：

<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" οnclick="return openwin()">打開javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</form>

頁面中的代碼處理如上所示，在onclick中獲取返回值爲false，也可以這樣寫οnclick="openwin();return false;"但不太直觀，還是建議如上寫法。
解釋一下爲什麼href不設置爲javascript:void(0)呢，主要是讓用戶在關閉Javascript功能的時候點擊該鏈接有響應，使用Javascript的原則就是儘量少用js。