it-swarm.com.ru

Как хранить произвольные данные для некоторых тегов HTML

Я делаю страницу, которая имеет некоторое взаимодействие, предоставляемое JavaScript. Просто в качестве примера: ссылки, которые отправляют запрос AJAX, чтобы получить содержимое статей и затем отобразить эти данные в div. Очевидно, что в этом примере мне нужна каждая ссылка для хранения дополнительной информации: идентификатора статьи. То, как я справлялся с этим, заключалось в том, чтобы поместить эту информацию в ссылку href:

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

Затем я использую jQuery, чтобы найти элементы a.article и присоединить соответствующий обработчик событий. (не зацикливайтесь на юзабилити или семантике здесь, это всего лишь пример)

В любом случае, этот метод работает, но он пахнет немного и вообще не расширяется (что произойдет, если функция щелчка имеет более одного параметра? Что делать, если некоторые из этих параметров являются необязательными?)

Сразу очевидным ответом было использование атрибутов элемента. Я имею в виду, для этого они и нужны, верно? (Вид).

<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 ?

325
nickf

Какую версию HTML вы используете?

В HTML 5 вполне допустимо иметь пользовательские атрибуты с префиксом data - , например.

<div data-internalid="1337"></div>

В XHTML это не совсем верно. Если вы находитесь в режиме XHTML 1.1, браузер, вероятно, будет жаловаться на это, но в режиме 1.0 большинство браузеров просто игнорируют его.

Если бы я был тобой, я бы следовал подходу на основе сценариев. Вы можете сделать это автоматически генерируемым на стороне сервера, чтобы не было проблем с поддержкой.

351
Tamas Czinege

Если вы уже используете jQuery, вам следует использовать метод "data", который является рекомендуемым методом для хранения произвольных данных в элементе dom с помощью jQuery.

Чтобы что-то хранить:

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

Чтобы получить данные:

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

Это все, что нужно сделать, но посмотрите на документация jQuery для получения дополнительной информации/примеров.

132
Prestaul

Просто я бы не стал использовать это, но он работает (убедитесь, что ваш JSON действителен, потому что eval () опасен).

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);
20
Luca Matteis

Произвольные атрибуты недопустимы, но совершенно надежны в современных браузерах. Если вы устанавливаете свойства через javascript, вам не нужно беспокоиться о проверке.

Альтернативой является установка атрибутов в JavaScript. jQuery имеет Хороший служебный метод только для этой цели, или вы можете бросить свой собственный.

12
Eran Galperin

Хак, который будет работать практически со всеми возможными браузерами, - это использовать открытые классы, такие как: <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 доступ для него, но не CSSselectors (что на самом деле не имеет значения), возможно, некоторые браузеры будут полностью сбиты с толку, вам нужно проверить это.

Делать такие забавные вещи, как сериализация и десериализация, было бы еще опаснее.

Использование ids для чистого хеша JS в основном работает, за исключением случаев, когда вы пытаетесь скопировать ваши теги. Если у вас есть tag<a href="..." id="link0">, скопируйте его с помощью стандартных методов JS, а затем попытайтесь изменить data, прикрепленное только к одной копии, другая копия будет изменена.

Это не проблема, если вы не копируете tags или используете данные только для чтения . Если вы копируете tags и они будут изменены, вам нужно будет обработать это вручную.

10
taw

Используя jquery,

хранить: $('#element_id').data('extra_tag', 'extra_info');

получить: $('#element_id').data('extra_tag');

9
user2458978

Вы можете использовать скрытые теги ввода. Я не получаю ошибок проверки на 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 вы получите идентификатор статьи с чем-то вроде (не проверено):

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

Но я бы порекомендовал HTML5, если это вариант.

6
phylae

Я знаю, что вы сейчас используете jQuery, но что, если вы определили встроенный обработчик onclick. Тогда вы могли бы сделать:

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

Почему бы не использовать значимые данные, которые уже есть, вместо добавления произвольных данных?

то есть используйте <a href="/articles/5/page-title" class="article-link">, и тогда вы можете программно получить все ссылки на статьи на странице (через имя класса) и идентификатор статьи (сопоставляя регулярное выражение /articles\/(\d+)/ против this.href).

4
user42092

Как пользователь jQuery, я бы использовал плагин метаданных . HTML-код выглядит чистым, он проверяется, и вы можете встраивать все, что можно описать с помощью нотации JSON.

4
Robin Smidsrød

Таким образом, для этого должно быть четыре варианта:

  1. Поместите данные в атрибут id.
  2. Поместите данные в произвольный атрибут
  3. Поместите данные в атрибут класса
  4. Поместите ваши данные в другой тег

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

3
Shanison

Я защищаю использование атрибута "rel". XHTML проверяет, сам атрибут используется редко, а данные эффективно извлекаются.

2
demonkoryu

Это хороший совет. Благодаря @Prestaul

Если вы уже используете jQuery, вам следует использовать метод "data", который является рекомендуемым методом для хранения произвольных данных в элементе dom с помощью jQuery.

Совершенно верно, но что, если вы хотите хранить произвольные данные в обычном HTML? Вот еще одна альтернатива ...

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

Поместите ваши данные в атрибуты name и value скрытого элемента ввода. Это может быть полезно, если сервер генерирует HTML (то есть сценарий PHP и ​​т.д.), И ваш код JavaScript будет использовать эту информацию позже.

Правда, не самый чистый, но это альтернатива. Он совместим со всеми браузерами и является действительным XHTML. Вы должны НЕ использовать пользовательские атрибуты, и при этом вы не должны использовать атрибуты с префиксом 'data-', так как он может работать не во всех браузерах. И, кроме того, ваш документ не пройдет проверку W3C.

2
BMiner

Вы можете использовать префикс данных вашего собственного атрибута made для случайного элемента (<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.

2
Yeti

Другим подходом может быть сохранение пары ключ: значение в виде простого класса с использованием следующего синтаксиса:

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

Это верно и может быть легко получено с помощью селекторов jQuery или пользовательской функции.

1
Raphaël

Одна возможность может быть:

  • Создайте новый div для хранения всех расширенных/произвольных данных.
  • Сделайте что-нибудь, чтобы убедиться, что этот div невидим (например, CSS плюс атрибут класса div)
  • Поместите расширенные/произвольные данные в теги [X] HTML (например, как текст внутри ячеек таблицы или что-либо еще, что вам может понравиться) в этом невидимом элементе div
1
ChrisW

У моего предыдущего работодателя мы постоянно использовали пользовательские теги HTML для хранения информации об элементах формы. Подвох: мы знали, что пользователь был вынужден использовать IE.

В то время это не помогало FireFox. Я не знаю, изменил ли FireFox это или нет, но помните, что добавление ваших собственных атрибутов к элементам HTML может или не может поддерживаться браузером вашего читателя.

Если вы можете контролировать, какой браузер использует ваш читатель (то есть внутренний веб-апплет для корпорации), то непременно попробуйте его. Что может повредить, верно?

0
Jerry

В html мы можем хранить пользовательские атрибуты с префиксом "data-" перед именем атрибута, например

<p data-animal='dog'>This animal is a dog.</p>. Проверьте документация

Мы можем использовать это свойство для динамической установки и получения атрибутов, используя jQuery, например: Если у нас есть тег p, например

<p id='animal'>This animal is a dog.</p>

Затем, чтобы создать атрибут "breed" для вышеуказанного тега, мы можем написать:

$('#animal').attr('data-breed', 'pug');

Чтобы получить данные в любое время, мы можем написать:

var breedtype = $('#animal').data('breed');

0
Akash Ghosh

Я обнаружил, что плагин метаданных является отличным решением проблемы хранения произвольных данных с тегом html таким образом, чтобы его было легко найти и использовать с jQuery.

Важно: Фактический файл, который вы включаете, составляет всего 5 КБ, а не 37 кб (это размер полного пакета загрузки)

Вот пример его использования для хранения значений, которые я использую при создании события отслеживания Google Analytics (примечание: data.label и data.value являются необязательными параметрами)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.Push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.Push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.Push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>
0
biofractal

Вот как я делаю 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="));
                   }
               }
           });
}

Как это работает, он в основном просматривает все URL-адреса, имеющие класс "ajx", заменяет ключевое слово и добавляет знак #, поэтому, если js выключен, тогда URL-адреса будут действовать так, как обычно ... all " apps "(каждый раздел сайта) имеет свое ключевое слово ... так что все, что мне нужно сделать, это добавить массив js выше, чтобы добавить больше страниц ...

Так, например, мои текущие настройки установлены на:

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

Так что, если у меня есть URL-адрес, такой как:

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

js-скрипт заменит/ads/part, так что мой URL окажется

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

Тогда я использую плагин BBQ jquery, чтобы загрузить страницу соответственно ...

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

0
jason

Если ваша реальная работа выполняется на стороне сервера, зачем вам вообще нужна пользовательская информация в тегах html в выходных данных? Все, что вам нужно знать на сервере, - это указатель на любой список структур с вашей пользовательской информацией. Я думаю, что вы хотите хранить информацию не в том месте.

Я признаю, как ни прискорбно, что во многих случаях правильное решение не является правильным. В этом случае я настоятельно рекомендую создать некоторый javascript для хранения дополнительной информации.

0
Kris