javascript - tag中文 - 如何為某些HTML標記存儲任意數據




w3c html5 (14)

我正在製作一個由JavaScript提供一些交互的頁面。 舉一個例子:發送AJAX請求來獲取文章內容然後在div中顯示該數據的鏈接。 顯然在這個例子中,我需要每個鏈接來存儲額外的信息:文章的ID。 我一直在處理它的方式是將這些信息放入href鏈接中:

<a class="article" href="#5">

然後我使用jQuery來查找a.article元素並附加適當的事件處理程序。 (不要太在意這裡的可用性或語義,這只是一個例子)

無論如何,這種方法是有效的,但它有點smells ,而且根本不可擴展(如果click函數有多個參數,會發生什麼?如果其中一些參數是可選的,會發生什麼?)

顯而易見的答案是在元素上使用屬性。 我的意思是,這就是他們的目的,對吧? (有點)。

<a articleid="5" href="link/for/non-js-users.html">

我最近的問題中,我詢問這種方法是否有效,結果表明我沒有定義我自己的DTD(我沒有),那麼不,它不是有效的或可靠的。 一個常見的反應是將數據放入class屬性中(儘管這可能是因為我選擇不好的例子),但對我而言,這更味道。 是的,這在技術上是有效的,但它不是一個好的解決方案。

過去我使用的另一種方法是實際生成一些JS,並將其插入到<script>標記的頁面中,從而創建一個與該對象關聯的結構。

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

但這可能是一個真正的屁股維護的痛苦,通常只是非常混亂。

因此,為了解決這個問題, 您如何為HTML標籤存儲任意信息片段


一種可能性可能是:

  • 創建一個新的div來保存所有擴展/任意數據
  • 做一些事情來確保這個div是不可見的(例如CSS加上div的class屬性)
  • 將擴展/任意數據放在[X] HTML標籤內(例如,作為表格單元格內的文本或其他您可能喜歡的內容)

任意屬性無效,但在現代瀏覽器中完全可靠。 如果你通過javascript設置屬性,那麼你不必擔心驗證。

另一種方法是在javascript中設置屬性。 jQuery有一個很好的實用方法,只是為了這個目的,或者你可以推出自己的。


你可以使用隱藏的輸入標籤。 我在w3.org上沒有發現驗證錯誤:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

有了jQuery,你會得到類似於(未測試)的文章ID:

$('.article input[name=articleid]').val();

但如果這是一個選項,我會推薦HTML5。


使用jQuery,

存儲: $('#element_id').data('extra_tag', 'extra_info');

檢索: $('#element_id').data('extra_tag');


另一種方法是使用以下語法將鍵值對存儲為簡單類:

<div id="my_div" class="foo:'bar'">...</div>

這是有效的,可以通過jQuery選擇器或自定義函數輕鬆獲取。


只要你真正的工作是在服務器端完成的,為什麼你需要輸出html標籤中的自定義信息呢? 所有你需要知道的服務器是一個索引到你的自定義信息的任何類型的結構列表。 我想你想把信息存儲在錯誤的地方。

無論如何,我會認識到,在很多情況下,正確的解決方案並不是正確的解決方案。 在這種情況下,我強烈建議生成一些JavaScript來保存額外的信息。


如果您已經使用jQuery,那麼您應該利用“數據”方法,這是推薦的方法,用jQuery將任意數據存儲在dom元素上。

存儲的東西:

$('#myElId').data('nameYourData', { foo: 'bar' });

檢索數據:

var myData = $('#myElId').data('nameYourData');

這就是它的全部內容,但請查看jQuery文檔以獲取更多信息/示例。


幾乎所有可能的瀏覽器都可以使用的黑客就是使用這樣的開放類: <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

對純粹主義者來說,這並不是那麼優雅,但它是普遍支持的,符合標準並且非常容易操作。 它真的好像是最好的方法。 如果你serialize修改複製你的標籤,或做其他事情, data將保持附加,複製等。

唯一的問題是,你不能以這種方式存儲不可序列化的對象 ,並且如果你在那裡放了一些非常大的東西,可能會有限制。

第二種方法是使用如下假冒屬性<a articleid='5' href="link/for/non-js-users.html">

這更加優雅,但打破了標準,我不能100%確定支持。 許多瀏覽器完全支持它,我認為IE6支持JS訪問,但不支持CSS selectors (這並不重要),也許有些瀏覽器會完全混淆,你需要檢查它。

做序列化和反序列化等有趣的事情會更加危險。

除了當你試圖複製你的標籤時,使用純JS散列的ids主要起作用。 如果您的tag <a href="..." id="link0"> ,通過標準JS方法複製它,然後嘗試修改僅附加到一個副本的data ,另一個副本將被修改。

如果您不復制tag或使用只讀數據,這不是問題。 如果您複製tag並將其修改,則需要手動處理。


您可以使用隨機元素的自定義屬性的數據前綴( <span data-randomname="Data goes here..."></span> ),但這僅在HTML5中有效。 因此,瀏覽器可能會抱怨有效性。

您也可以使用<span style="display: none;">Data goes here...</span>標籤。 但是這樣你不能使用屬性函數,並且如果關閉了css和js,這也不是一個很好的解決方案。

但我個人更喜歡以下內容:

<input type="hidden" title="Your key..." value="Your value..." />

在所有情況下,輸入都將被隱藏,屬性是完全有效的,並且如果它位於<form>標記內,它將不會被發送,因為它沒有任何名稱,對嗎? 最重要的是,這些屬性非常易於記憶,代碼看起來不錯並且易於理解。 你甚至可以在其中放入一個ID屬性,這樣你就可以輕鬆地用JavaScript訪問它,並通過input.title; input.value訪問鍵值對input.title; input.value input.title; input.value


我主張使用“rel”屬性。 XHTML驗證,屬性本身很少使用,並且數據被有效地檢索。


我知道你現在正在使用jQuery,但是如果你定義了onclick處理程序內聯。 那麼你可以這樣做:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

所以應該有四個選擇來做到這一點:

  1. 將數據放入id屬性中。
  2. 將數據放入任意屬性中
  3. 將數據放在class屬性中
  4. 把你的數據放在另一個標籤中

http://www.shanison.com/?p=321


這就是我如何做你的AJAX頁面...它是一個非常簡單的方法...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

這是如何工作的,它基本上是查看所有具有類'ajx'的URL,它替換了一個關鍵字並添加了#符號...所以如果js被關閉,那麼這些網址會像通常那樣執行......所有“應用程序“(網站的每個部分)都有自己的關鍵字......所以我需要做的就是添加到上面的js數組以添加更多頁面......

所以例如我的當前設置設置為:

 var objApps= ['ads','user'];

所以,如果我有一個網址如:

www.domain.com/ads/3923/bla/dada/bla

js腳本會替換/ ads / part,所以我的網址最終會變成

www.domain.com/ads/#p=3923/bla/dada/bla

然後,我使用jquery bbq插件相應地加載頁面...

http://benalman.com/projects/jquery-bbq-plugin/


這是很好的建議。 感謝@Prestaul

如果您已經使用jQuery,那麼您應該利用“數據”方法,這是推薦的方法,用jQuery將任意數據存儲在dom元素上。

非常真實,但是如果你想將任意數據存儲在普通的HTML中呢? 這是另一個選擇...

<input type="hidden" name="whatever" value="foobar"/>

將數據放入隱藏的輸入元素的名稱和值屬性中。 如果服務器生成HTML(例如PHP腳本或其他),這可能會很有用,並且您的JavaScript代碼稍後將使用此信息。

誠然,不是最乾淨的,但它是一種選擇。 它與所有瀏覽器兼容,並且是有效的XHTML。 您不應該使用自定義屬性,也不應該使用具有'data-'前綴的屬性,因為它可能不適用於所有瀏覽器。 此外,您的文檔不會通過W3C驗證。







html