javascript:void(0)使用介紹與偽協議
最近看了好幾個關於<a>
標籤和javascript:void(0)的帖子,謹記於此,以資查閱。
在做頁面時,如果想做一個連結點選後不做任何事情,或者響應點選而完成其他事情,可以設定其屬性 href = “#”,但是,這樣會有一個問題,就是當頁面有滾動條時,如果不做任何處理點選後會返回到頁面頂端。
目前有如下幾種解決辦法:
1.點選連結後不做任何事情
<a href="#"></a>
<a href="#none"></a>
<a href="###"></a>
<a href="javascript:" ></a>
<a href="javascript:;"></a>
<a href="javascript:void(0)"></a>
<a href="javascript :void(0);"></a>
第1種,點選這個連結後,會讓頁面跳到頁面頂部,在location.href後面增加#號。
第2種,點選這個連結後, 如果頁面裡面有id為none的元素,會執行錨點機制跳轉到這個元素上緣。
第3種,不跳轉,可以阻止預設的跳轉行為,但是這個在後端程式碼中容易識別成註釋,後面的程式碼不顯示,之前遇到過這種坑,之後再沒用過。
後面幾種使用了javascript偽協議。我們上面已經對5和7進行了說明,想詳細瞭解void運算子,可前往
為什麼我要列出4和6呢,有時候有些同學會忘記寫分號,這樣在IE6下面點選a標籤,會造成頁面中的gif暫停。
另外<a href="#" onclick='return false'></a>
當return為false,js會判定點選事件沒有觸發,同樣可以禁止頁面跳轉
2.點選連結後,響應使用者自定義的點選事件
<a href="javascript:void(0)" onclick="doSomething()" >test</a>
<a href="#" onclick="doSomething();return false;">什麼問題都解決了,包括瀏覽器不相容問題</a> //或者直接使用href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a>
說明:
1.javascript:void(0)這種偽協議,少寫的好,禁止載入js的使用者會無法正常使用你的頁面。
2.連結(href)直接使用javascript:void(0)在IE中可能會引起一些問題,比如:造成gif動畫停止播放等,所以,最安全的辦法還是使用“####”。為防止點選連結後跳轉到頁首,onclick事件return false即可。
3.如果僅僅是想滑鼠移過,變成手形,可以使用
<span style="cursor:pointer" onclick="foo()">Click Me!</span>
123
引申:
1.void 操作符用法格式如下:
javascript:void (expression)
javascript:void expression
為了程式風格良好,建議使用第一種帶上括號的
我們可以使用void操作符指定超級連結,如javascript:void(document.form.submit())。表示式會被計算但是不會在當前文件處裝入任何內容,void(0)計算為0,但在JavaScript上沒有任何效果,也就是說<a href="javascript:void(0)">的效果同<a href="javascript:void(1)">
的效果是一樣的。
關鍵是隻要知道void是javascipt自身的操作符,它表示的是隻執行表示式,但沒有返回值!
另外頁面會自動調回頂端,是因為”#”預設的瞄點位置是top,所以會出現這種情況。
2.javascript 偽協議:
偽協議不同於因特網上所真實存在的協議,如http://,https://,ftp://,
而是為關聯應用程式而使用的.如:tencent://(關聯QQ),data:(用base64編碼來在瀏覽器端輸出二進位制檔案),還有就是javascript:
我們可以在瀏覽位址列裡輸入"javascript:alert('JS!');"
(不信可以試試哦!),點轉到後會發現,實際上是把javascript:後面的程式碼當JavaScript來執行,並將結果值返回給當前頁面。
將javascript程式碼新增到客戶端的方法是把它放置在偽協議說明符javascript:後的URL中。這個特殊的協議型別聲明瞭URL的主體是任意的javascript程式碼,它由javascript的直譯器執行。如果javascript:URL中的javascript程式碼含有多個語句,必須使用分號將這些語句分隔開。這樣的URL如下所示:
javascript:var now = new Date(); "<h1>The time is:</h1>" + now;
(大家同樣可以在自己的瀏覽器裡試試上邊的程式碼)
當瀏覽器裝載了這樣的URL時,它將執行這個URL中包含的javascript程式碼,並把最後一條javascript語句的字串值作為新文件的內容顯示出來。這個字串值可以含有HTML標記,並被格式化,其顯示與其他裝載進瀏覽器的文件完全相同。
javascript URL還可以含有隻執行動作,但不返回值的javascript語句。例如:
javascript:alert("hello world!")
裝載了這種URL時,瀏覽器僅執行其中的javascript程式碼,但由於沒有作為新文件來顯示的值,因此它並不改變當前顯示的文件。
通常我們想用javascript:URL執行某些不改變當前顯示的文件的javascript程式碼。要做到這一點,必須確保URL中的最後一條語句沒有返回值。一種方法是用void運算子顯式地把返回值指定為underfined,只需要在javascript:URL的結尾使用語句void 0;即可。例如:下面的URL將開啟一個新的空瀏覽器視窗,而不改變當前視窗的內容:
javascript:window.open("about:blank"); void 0;
如果這個URL沒有void運算子,window.open()方法的返回值將被轉換成字串並被顯示出來,當前視窗將被如下所示的文件覆蓋。