Como armazenar dados arbitrários para algumas marcas HTML
<a class="article" href="#5">
Eu então uso jQuery para encontrar os elementos do artigo A. e anexar o evento apropriado manipulador. (Não fique muito obcecado com a usabilidade ou semântica aqui, é apenas um exemplo)
de qualquer forma, este método funciona, mas ele cheira um pouco, e não é extensível de todo (o que acontece se a função click tem mais do que um parâmetro? e se alguns desses parâmetros forem opcionais?)
a resposta imediatamente óbvia era usar atributos no elemento. É para isso que servem, certo? (Meio).
<a articleid="5" href="link/for/non-js-users.html">
na minha recente pergunta perguntado se este método era válido, e acontece que a falta de definir o meu próprio DTD (eu não), então não, não é válido ou confiável. Uma resposta comum foi colocar os dados no atributo class (embora isso possa ter sido por causa do meu exemplo mal escolhido), mas para mim, isso cheira ainda mais. Sim, é tecnicamente válido, mas não é uma boa solução.
outro método que eu tinha usado no passado era gerar alguns JS e inseri - los na página numa etiqueta <script>, criando uma estrutura que se associaria ao objecto.
var myData = {
link0 : {
articleId : 5,
target : '#showMessage'
// etc...
},
link1 : {
articleId : 13
}
};
<a href="..." id="link0">
então, para chegar à pergunta, Como é que se armazenam pedaços arbitrários de informação para etiquetas HTML?
20 answers
Que versão de HTML está a usar?
No HTML 5, é totalmente válido ter atributos personalizados precedidos de dados - , por exemplo
<div data-internalid="1337"></div>
Em XHTML, isto não é realmente válido. Se você estiver no modo XHTML 1.1, o navegador provavelmente irá reclamar sobre ele, mas no modo 1.0, a maioria dos navegadores irá simplesmente ignorá-lo silenciosamente.
Se fosse a ti, seguiria a abordagem baseada no guião. Você pode fazê-lo gerado automaticamente no lado do servidor para que não seja uma dor no de volta para manter.Se já está a usar o jQuery, então deve usar o método "dados", que é o método recomendado para armazenar dados arbitrários num elemento dom com o jQuery.
Para guardar algo:
$('#myElId').data('nameYourData', { foo: 'bar' });
Para obter dados:
var myData = $('#myElId').data('nameYourData');
Isso é tudo o que há para ele, mas dê uma olhada na documentação jQuery Para mais informações/exemplos.
<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);
Atributos arbitrários não são válidos, mas são perfeitamente confiáveis nos navegadores modernos. Se você está configurando as propriedades através de javascript, então você não tem que se preocupar com a validação também.
Uma alternativa é definir atributos em javascript. jQuery tem um bom método de utilidade {[[4]}só para esse fim, ou você pode rolar o seu próprio.
<a class='data\_articleid\_5' href="link/for/non-js-users.html>;
Isto não é assim tão elegante para os puristas, mas é universalmente apoiado, compatível com as normas e muito fácil de manipular. Parece ser o melhor método possível. Se serialize, modificar, copie as suas marcas, ou Faça praticamente qualquer outra coisa, data ficará ligado, copiado, etc.
O único problema é que você não pode armazenar objetos não serializáveis dessa forma, e pode haver limites se você colocar algo realmente enorme lá.
Uma segunda maneira é usar atributos falsos como: <a articleid='5' href="link/for/non-js-users.html">
JS acesso para ele, mas não CSS selectors (o que realmente não importa aqui), talvez alguns navegadores ser completamente confuso, você precisa verificar.
fazer coisas engraçadas como serializar e deserializar seria ainda mais perigoso.
Usar ids para limpar JS o hash funciona principalmente, excepto quando se tenta copiar as etiquetas. Se tem tag <a href="..." id="link0">, Copie-o através dos métodos standard JS, e depois tente modificar data anexado a apenas uma cópia, a outra cópia será modificada.
Não é um problema se você não copiar tags, ou usar leia apenas Dados. Se você copiar tag e eles forem modificados você vai tenho de tratar disso manualmente.
Usando jquery,
Para conservar: $('#element_id').data('extra_tag', 'extra_info');
Para recuperar: $('#element_id').data('extra_tag');
<a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
Article 5</a>
Podes usar etiquetas escondidas. Não recebo erros de validação em w3.org com isto:
<!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>
Com jQuery obteria o ID do artigo com algo como (não testado):
$('.article input[name=articleid]').val();
Porque não fazer uso dos dados significativos já existentes, em vez de adicionar dados arbitrários?
Isto é, use <a href="/articles/5/page-title" class="article-link">, e então poderá programaticamente obter todas as ligações de artigos na página (através do nome da classe) e no ID do artigo (correspondente à expressão regular /articles\/(\d+)/ contra this.href).
Como utilizador do jQuery, usaria o 'plugin' de meta-dados . O HTML parece limpo, valida, e você pode incorporar qualquer coisa que possa ser descrita usando a notação JSON.
- Coloque os dados no atributo id.
- Coloque os dados no atributo arbitrário
- Coloque os dados no atributo class
- Coloque os seus dados noutra etiqueta
Defendo a utilização do atributo" rel". O valor XHTML, o próprio atributo é raramente usado, e os dados são recuperados de forma eficiente.
Se já está a usar o jQuery, então deve usar os "dados" método que é o método recomendado para armazenar dados arbitrários em elemento dom com jQuery.
Muito verdadeiro, mas e se você quiser armazenar dados arbitrários em HTML simples? Aqui está outra alternativa...
<input type="hidden" name="whatever" value="foobar"/>
Coloque os seus dados no nome e valor atributos de um elemento de entrada escondido. Isto pode ser útil se o servidor for gerando HTML (isto é, um script PHP ou qualquer coisa), e seu código JavaScript vai usar esta informação mais tarde.
Admito que não é o mais limpo, mas é uma alternativa. É compatível com todos navegadores e é válido XHTML. Você deve Não usar atributos personalizados, nem deve realmente usar atributos com o prefixo' data -', pois pode não funcionar em todos os navegadores. E, além disso, o seu documento não passará na Validação W3C.Você poderia usar o prefixo de dados do seu próprio atributo feito de um elemento aleatório (<span data-randomname="Data goes here..."></span>), mas isto só é válido no HTML5. Assim, os navegadores podem reclamar sobre a validade.
Também pode usar uma etiqueta <span style="display: none;">Data goes here...</span>. Mas desta forma você não pode usar as funções do atributo, e se css e js for desligado, esta também não é realmente uma solução limpa.
Mas o que eu pessoalmente prefiro é o seguinte:
<input type="hidden" title="Your key..." value="Your value..." />
A entrada será em todos os casos escondida, os atributos são completamente válido, e não será enviado se estiver dentro de uma tag <form>, Uma vez que não tem nenhum nome, certo?
Acima de tudo, os atributos são realmente fáceis de lembrar e o código parece agradável e fácil de entender. Você pode até colocar um atributo ID nele, para que você possa facilmente acessá-lo com JavaScript também, e acessar o par de valores de chave com input.title; input.value.
- Crie um novo div para manter todos os dados extensos / arbitrários
- Fazer algo para garantir que este div é invisível (por exemplo, CSS mais um atributo de classe do div)
- Coloque os dados EXTENDIDOS / arbitrários dentro de [X]tags HTML (por exemplo, como texto dentro de células de uma tabela, ou qualquer outra coisa que você possa gostar) dentro deste div invisível
Outra abordagem pode ser armazenar uma chave: par de valores como uma classe simples, usando a seguinte sintaxe:
<div id="my_div" class="foo:'bar'">...</div>
Isto é válido e pode ser facilmente obtido com selectores jQuery ou uma função personalizada.
Desde que o seu trabalho seja feito, serverside, porque é que precisa de informação personalizada nas marcas de html no resultado? tudo o que você precisa saber de volta no servidor é um índice em qualquer tipo de Lista de estruturas com a sua informação personalizada. Acho que estás a tentar guardar a informação no sítio errado.
Reconhecerei, por mais lamentável que seja, que em muitos casos a solução certa não é a solução certa. Nesse caso, eu sugeriria fortemente gerar algum javascript para manter a informação extra.No meu empregador anterior, usávamos tags HTML personalizadas o tempo todo para manter informações sobre os elementos do formulário. A captura: nós sabíamos que o usuário foi forçado a usar IE.
Não funcionou bem para o FireFox na altura. Não sei se o FireFox mudou isto ou não, mas esteja ciente de que adicionar seus próprios atributos a elementos HTML pode ou não ser suportado pelo navegador do seu leitor.Se puder controlar o navegador que o seu leitor está a usar (isto é, uma 'applet' Web interna para um corporation), então por todos os meios, tente. O que pode doer, certo?
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="));
}
}
});
}
Como isto funciona é que basicamente olha para todos os URLs que têm a classe 'ajx' e substitui uma palavra-chave e adiciona o sinal#... se o js for desligado, as urls agirão como normalmente fazem... todos os "apps" (cada seção do site) tem sua própria palavra-chave... então tudo que eu preciso fazer é adicionar ao array js acima para adicionar mais páginas...
Por isso, por exemplo, a minha configuração actual está definida como:
var objApps= ['ads','user'];
Www.domain.com/ads/3923/bla/dada/bla
O programa js substituiria a parte / ads / para que o meu URL acabasse por ser
Www.domain.com/ads/#p=3923/bla/dada/bla
Então eu uso o plugin jquery bbq para carregar a página de acordo...
Eu encontrei o plugin de metadados para ser uma excelente solução para o problema de armazenar dados arbitrários com a tag html de uma forma que torna fácil de recuperar e usar com jQuery.
Importante: O arquivo real incluir é apenas 5 kb e não 37 kb (que é o tamanho do download completo do pacote)
Aqui está um exemplo de que ele está sendo usado para armazenar os valores que eu uso ao gerar um evento de rastreamento do google analytics (nota: dados.rótulo e dado.o valor é facultativo)
$(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"/>