A標簽使用javascript:偽協議

一、前言

今天，遇到一個別人挖的坑，問題是這樣的。

做了一個列表頁，可以篩選數據，有很多篩條件。主要是有input復選框和<a>標簽兩種。如圖：

 

 

其中房價的篩選條件使用<a>標簽，代碼如下

<a href="javascript:;" name="price">150元-300元</a>

 

用javascript:; 來阻止了a標簽跳轉鏈接。

但是，卻發現在IE下面點擊a標簽，居然清除了其他input復選框的篩選項，what？

第一次碰到這種情況，然后我仔細研究了一番，發現是偽協議搞的鬼。那么我們一起看看這到底是怎么回事。 

 

二、什么是偽協議

偽協議不同於因特網上所真實存在的協議，如http://，https://，ftp://，

而是為關聯應用程序而使用的.如:tencent://(關聯QQ)，data:(用base64編碼來在瀏覽器端輸出二進制文件)，還有就是javascript:

我們可以在瀏覽地址欄里輸入"javascript:alert('JS!');"，點轉到后會發現，實際上是把javascript:后面的代碼當JavaScript來執行，並將結果值返回給當前頁面。

 

三、深入代碼找問題

想了半天實在想不出所以然，然后我返回頁面看這個<a>標簽， 難道是javascript:;這個寫法有問題？

於是我改成了我常用javascript:vioid(0);寫法，但是問題依然沒有解決。真是奇怪。。。

 

心煩意亂，然后打算先跳出這個問題，看了一看javascript:void(0);和javascript:;的區別：

 

其實兩種都是javascript：URL 的形式，在瀏覽器打開javascript：URL的時候，它會先運行URL中的代碼，當返回值不為undefined的時候，前頁鏈接會替換為這段代碼的返回值。

javascript:void(0), 我們知道void運算符會對給定的表達式進行求值，然后直接返回 undefined，javascript:; 也是返回 undefined，所以兩種方法是等價的。

 

回到問題本身，想想好奇怪，為什么點擊<a>標簽會取消其他input復選框的選中呢？

因為是維護別人的代碼，所以突然想到，會不會是有代碼執行了這個操作，於是我搜索了一下代碼，看哪里執行了取消input復選框的選中操作。

很快，我就定位到了頁面中onbeforeunload函數中執行了取消input復選框選中的操作，估計寫這段代碼的同學，是想要在頁面銷毀之前取消input的選中，

避免瀏覽器前進后退復選框仍選中，造成數據不符的問題。

 

到了這一步，問題清晰了一點，那么只需要測試，是否在IE下，點擊這種寫有javascript:;的a標簽會觸發onbeforeunload。

於是我打開瀏覽器做了測試，果真在ie9及其以下的瀏覽器觸發了這個事件。

 

雖然之前就知道IE中a標簽事件調用順序：onclick->window.onbeforeunload->href ，但是通常頁面中很少會使用onbeforeunload方法，很多時候是忽略的。

 

最后說一下我的解決辦法，

在<a>標簽綁定的click事件中，使用event.preventDefault();取消它的默認行為，頁面可以正常運行了。

不知道大家有沒有其他更好的方法，有的話，還希望大家在留言中告訴我，多多交流。

 

四、聊聊a標簽使用偽協議

問題終於解決了，讓我們放松心情，聊聊<a> 標簽使用javascript:偽協議吧。通常我們為<a>標簽增加href屬性，一般有兩個目的：

1. 跳轉到指定的頁面，也就是:link選擇器可以選擇到它。

2. 有href屬性的<a>標簽才有cursor：pointer的效果，特別實在低版本瀏覽器里面。

 

下面我們主要是聊聊不想要<a>標簽跳轉到實際頁面的幾種方法。

1. <a href="#"></a>

2. <a href="#none"></a>

3. <a href="###"></a>

4. <a href="javascript:"></a>

5. <a href="javascript:;"></a>

6. <a href="javascript:void(0)"></a>

7. <a href="javascript :void(0);"></a>

 

第1種，點擊這個鏈接后，會讓頁面跳到頁面頂部，在location.href后面增加#號。

第2種，點擊這個鏈接后， 如果頁面里面有id為none的元素，會執行錨點機制跳轉到這個元素上緣。

第3種，不跳轉，可以阻止默認的跳轉行為，但是這個在后端代碼中容易識別成注釋，后面的代碼不顯示，之前遇到過這種坑，之后再沒用過。

后面幾種使用了javascript偽協議。我們上面已經對5和7進行了說明，想詳細了解void運算符，可前往https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/void查看。

為什么我要列出4和6呢，有時候有些同學會忘記寫分號，這樣在IE6下面點擊a標簽，會造成頁面中的gif暫停。

 

 

 

本博客文章皆為原創，未盡許可，請勿轉載 （http://www.cnblogs.com/song-song/p/5277838.html）