2010-02-23 56 views
20

我的印象是,我只需要在URL屬性中使用JavaScript時指定「協議」,例如在hrefs中。這是javascript:唯一「有用」的環境嗎?何時需要指定JavaScript協議?

明智:

<a href="javascript:alert('Hello')">World!</a> 

傻:

<form onsubmit="javascript:alert('oops!')"> 

這是正確的?或者是否有我需要注意的一些模糊的錯誤/用例?

回答

14

javascript:事件處理程序上的僞協議將只被忽略,你不需要它,JavaScript引擎會將javascript:解釋爲Label Statement

標籤只是簡單地爲語句提供標識符,並允許您在程序中的其他地方引用它。

恕我直言,這種僞協議只對有用的bookmarklet ...

推薦文章:

4

根本不指定它。這是錯誤的做在<a>標籤,而是應該被編碼是這樣的:

<a href='#' onclick='alert("Hello")'>World</a> 

這是由昔日的遺蹟。我唯一能想到的地方就是瀏覽器地址欄(和書籤書籤)。把它放在你的頁面之外。

+6

請記住'返回false;'如果您使用#,以便取消href'操作並且不會進入頁面頂部或者(更糟糕的是)如果您有一個實際使用的哈希值爲了某件事。或者,您可以使用'javascript://'作爲'href',它將確實不會做任何事情。 – Nicole 2010-02-23 20:36:50

+5

+1 @Renesis。此外,你甚至可以用該方法在href中添加一個簡單的描述。例如:'javascript://在新窗口中打開。這是一個JS評論,所以你可以把任何東西放在那裏。這很有幫助,因爲當用戶將鼠標懸停在鏈接上時,它會顯示在狀態欄中 – adamJLev 2010-02-23 20:39:23

+0

@Infinity - 酷酷的主意!我以前沒有想到這一點。 – Nicole 2010-02-23 20:44:47

2

在實踐中,你是正確的。

您需要在預期腳本以外的任何情況下執行此操作。從理論上講,您可以在任何可以使用URL的地方粘貼javascript:whatever,但這從未得到支持,現在已正式推薦使用。

但是,你真的不應該使用javascript:在所有。對於鏈接,您可以使用onclick屬性。現在實際發生的事情是JavaScript引擎將javascript:標識爲標籤,這就是代碼執行的原因。

4

正如其他答案所述,避免使用href鏈接,並且在事件處理程序屬性中完全沒有必要。但是,由於A標籤有時仍然在語義上正確,因此如果您希望將:link:hover CSS樣式應用於Internet Explorer中的元素,則需要在href屬性中添加內容。在這種情況下,使用方法:

<a href="#" onclick="doSomething(); return false;">Link</a> 

或者

<a href="javascript://" onclick="doSomething();">Link</a> 

有一個(有點模糊)錯誤與的JavaScript協議 - 在Internet Explorer中*,它會認爲你離開頁面時你點擊鏈接。如果您正在使用window.onbeforeunload,那麼此時您的導航消息將顯示。僅因爲這個原因,我們已經完全停止使用javascript協議,所以我們沒有顯示這個錯誤,因爲當我們向某個頁面添加導航消息時,我們忘記檢查它。


*我大概應該在我第一次寫這個時指定版本。我根本不記得,但爲了萬一這個錯誤只出現在IE 6或7等現在大多停用的瀏覽器中,你可能最好自己測試它。

+0

+1難忘的bug – cgp 2010-02-23 21:18:52

1

你應該全部由「拉塞賴希斯坦尼爾森」退房 http://bytes.com/topic/javascript/answers/504856-javascript-pseudo-protocol-event-handlers 尤其是後期,因爲大多數的答案是這裏有以某種方式不正確。

另外請記住,錨標記根本不需要href!那是 <a>hi</a>是有效的xhtml。使用href="#"的問題是它可能會滾動到頁面的頂部..它根本就不是必需的。最後,如果您實際上不想要錨標記的行爲,則不應使用它。你可以使用css(cursor:pointer)和類似mouseenter和mouseleave這樣的事件來模擬錨點(這是更多的工作,但不會「破壞」錨定標記​​的預期行爲)。

+0

「簡單不需要」對所有瀏覽器都不適用。如果沒有'href',在IE的某些版本中將不會應用正確的CSS樣式,並且錨定標記不會與文本區分開來,也不會使用':hover'。 – Nicole 2010-09-30 21:30:49