que - llamar archivo javascript desde html
Cómo almacenar datos arbitrarios para algunas etiquetas HTML (20)
Estoy haciendo una página que tiene alguna interacción proporcionada por javascript. Solo como ejemplo: enlaces que envían una solicitud AJAX para obtener el contenido de los artículos y luego mostrar esos datos en una división. Obviamente, en este ejemplo, necesito que cada enlace almacene un poco de información adicional: la identificación del artículo. La forma en que lo he manejado por si acaso fue poner esa información en el enlace href:
<a class="article" href="#5">
Luego uso jQuery para encontrar los elementos de un artículo y adjuntar el controlador de eventos apropiado. (No te obsesiones con la usabilidad o la semántica aquí, es solo un ejemplo)
De todos modos, este método funciona, pero smells un poco y no es extensible en absoluto (¿qué sucede si la función de clic tiene más de un parámetro? ¿Qué pasa si algunos de esos parámetros son opcionales?)
La respuesta inmediatamente obvia fue usar atributos en el elemento. Quiero decir, para eso están, ¿verdad? (Mas o menos).
<a articleid="5" href="link/for/non-js-users.html">
En mi pregunta reciente pregunté si este método era válido, y resulta que, aparte de definir mi propia DTD (no lo hago), entonces no, no es válido ni confiable. Una respuesta común fue colocar los datos en el atributo de class (aunque podría haber sido debido a mi mal elegido ejemplo), pero para mí, esto huele aún más. Sí, es técnicamente válido, pero no es una gran solución.
Otro método que había usado en el pasado era generar algo de JS e insertarlo en la página en una etiqueta <script> , creando una estructura que se asociaría con el objeto.
var myData = {
link0 : {
articleId : 5,
target : ''#showMessage''
// etc...
},
link1 : {
articleId : 13
}
};
<a href="..." id="link0">
Pero esto puede ser un verdadero dolor para mantener a tope y generalmente es muy desordenado.
Entonces, para llegar a la pregunta, ¿cómo almacena información arbitraria para las etiquetas HTML ?
¿Por qué no hacer uso de los datos significativos que ya están allí, en lugar de agregar datos arbitrarios?
es decir, use <a href="/articles/5/page-title" class="article-link"> , y luego puede obtener mediante programación todos los enlaces de artículos en la página (a través del nombre de clase) y la ID del artículo (que coincida con la expresión regular /articles//(/d+)/ contra this.href ).
¿Qué versión de HTML estás usando?
En HTML 5, es totalmente válido tener atributos personalizados con el prefijo de datos , por ejemplo,
<div data-internalid="1337"></div>
En XHTML, esto no es realmente válido. Si estás en el modo XHTML 1.1, el navegador probablemente se quejará, pero en el modo 1.0, la mayoría de los navegadores simplemente lo ignorarán.
Si yo fuera tú, seguiría el enfoque basado en guiones. Podría hacer que se genere automáticamente en el lado del servidor para que no sea un problema mantenerlo en la parte posterior.
Abogo por el uso del atributo "rel". El XHTML se valida, el atributo en sí rara vez se utiliza y los datos se recuperan de manera eficiente.
Así es como hago tus páginas ajax ... es un método bastante fácil ...
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="));
}
}
});
}
La forma en que funciona es que básicamente mira todas las URL que tienen la clase ''ajx'' y reemplaza una palabra clave y agrega el signo # ... así que si js está desactivado, las direcciones URL actuarán como lo hacen normalmente ... todas " aplicaciones "(cada sección del sitio) tiene su propia palabra clave ... así que todo lo que tengo que hacer es agregar a la matriz js de arriba para agregar más páginas ...
Así, por ejemplo, mi configuración actual se establece en:
var objApps= [''ads'',''user''];
Así que si tengo una url como:
www.dominio.com/ads/3923/bla/dada/bla
la secuencia de comandos js reemplazaría a / ads / part, por lo que mi URL terminaría siendo
www.dominio.com/ads/#p=3923/bla/dada/bla
Luego uso el plugin jquery bbq para cargar la página en consecuencia ...
Así que debería haber cuatro opciones para hacerlo:
- Ponga los datos en el atributo id.
- Poner los datos en el atributo arbitrario.
- Poner los datos en atributo de clase.
- Ponga sus datos en otra etiqueta
Como usuario de jQuery, usaría el complemento Metadata . El HTML se ve limpio, se valida y se puede incrustar cualquier cosa que se pueda describir utilizando la notación JSON.
En mi empleador anterior, usamos etiquetas HTML personalizadas todo el tiempo para mantener información sobre los elementos del formulario. El problema: sabíamos que el usuario estaba obligado a usar IE.
No funcionó bien para Firefox en ese momento. No sé si FireFox ha cambiado esto o no, pero tenga en cuenta que agregar sus propios atributos a elementos HTML puede o no ser compatible con el navegador de su lector.
Si puede controlar qué navegador está usando su lector (es decir, un applet web interno para una corporación), entonces inténtelo. ¿Qué puede doler, verdad?
Este es un buen consejo. Gracias a @Prestaul
Si ya está utilizando jQuery, debería aprovechar el método de "datos", que es el método recomendado para almacenar datos arbitrarios en un elemento dom con jQuery.
Muy cierto, pero ¿qué sucede si desea almacenar datos arbitrarios en HTML simple? Aquí hay otra alternativa ...
<input type="hidden" name="whatever" value="foobar"/>
Ponga sus datos en los atributos de nombre y valor de un elemento de entrada oculto. Esto podría ser útil si el servidor está generando HTML (es decir, un script PHP o lo que sea), y su código JavaScript utilizará esta información más adelante.
Es cierto que no es el más limpio, pero es una alternativa. Es compatible con todos los navegadores y es válido XHTML. NO debe usar atributos personalizados, ni tampoco debe usar atributos con el prefijo ''datos-'', ya que podría no funcionar en todos los navegadores. Y, además, su documento no pasará la validación W3C.
He encontrado que el complemento de metadatos es una excelente solución al problema de almacenar datos arbitrarios con la etiqueta html de manera que sea fácil de recuperar y usar con jQuery.
Importante : el archivo real que incluye es de solo 5 kb y no de 37 kb (que es el tamaño del paquete de descarga completo)
Este es un ejemplo de cómo se utiliza para almacenar valores que utilizo al generar un evento de seguimiento de Google Analytics (nota: data.label y data.value son parámetros opcionales)
$(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"/>
Los atributos arbitrarios no son válidos, pero son perfectamente confiables en los navegadores modernos. Si está configurando las propiedades mediante javascript, tampoco tiene que preocuparse por la validación.
Una alternativa es establecer atributos en javascript. jQuery tiene un buen método de utilidad solo para ese propósito, o puedes hacerlo tú mismo.
Otro enfoque puede ser almacenar un par clave: valor como una clase simple usando la siguiente sintaxis:
<div id="my_div" class="foo:''bar''">...</div>
Esto es válido y se puede recuperar fácilmente con los selectores jQuery o una función personalizada.
Podrías usar etiquetas de entrada ocultas. No obtengo errores de validación en w3.org con esto:
<!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>
Con jQuery obtendrías el ID del artículo con algo como (no probado):
$(''.article input[name=articleid]'').val();
Pero recomendaría HTML5 si esa es una opción.
Puede usar el prefijo de datos de su propio atributo hecho de un elemento aleatorio ( <span data-randomname="Data goes here..."></span> ), pero esto solo es válido en HTML5. Por lo tanto los navegadores pueden quejarse de la validez.
También puede usar una etiqueta <span style="display: none;">Data goes here...</span> . Pero de esta manera, no puede usar las funciones de atributos, y si css y js están desactivados, esto tampoco es una buena solución.
Pero lo que personalmente prefiero es lo siguiente:
<input type="hidden" title="Your key..." value="Your value..." />
La entrada se ocultará en todos los casos, los atributos son completamente válidos y no se enviarán si está dentro de una etiqueta <form> , ya que no tiene ningún nombre, ¿verdad? Por encima de todo, los atributos son realmente fáciles de recordar y el código parece agradable y fácil de entender. Incluso podría poner un atributo de ID en él, así que también puede acceder fácilmente con JavaScript y acceder al par clave-valor con input.title; input.value input.title; input.value .
Sé que actualmente está utilizando jQuery, pero ¿qué sucede si definió el controlador onclick en línea? Entonces podrías hacer:
<a href=''/link/for/non-js-users.htm'' onclick=''loadContent(5);return false;''>
Article 5</a>
Si ya está utilizando jQuery, debería aprovechar el método de "datos", que es el método recomendado para almacenar datos arbitrarios en un elemento dom con jQuery.
Para guardar algo:
$(''#myElId'').data(''nameYourData'', { foo: ''bar'' });
Para recuperar datos:
var myData = $(''#myElId'').data(''nameYourData'');
Eso es todo lo que hay, pero eche un vistazo a la documentación de jQuery para obtener más información / ejemplos.
Siempre que su trabajo real se realice en el servidor, ¿por qué necesitaría información personalizada en las etiquetas html en la salida? Todo lo que necesita saber de nuevo en el servidor es un índice en cualquier tipo de lista de estructuras con su información personalizada. Creo que estás buscando almacenar la información en el lugar equivocado.
Reconoceré, aunque sea desafortunado, que en muchos casos la solución correcta no es la solución correcta. En cuyo caso sugeriría fuertemente generar algún javascript para guardar la información adicional.
Solo de otra manera, personalmente no lo usaría pero funciona (asegúrate de que tu JSON sea válido porque eval () es peligroso).
<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);
Un hack que va a funcionar con casi todos los navegadores posibles es usar clases abiertas como esta: <a class=''data/_articleid/_5'' href="link/for/non-js-users.html>;
Esto no es tan elegante para los puristas, pero es universalmente compatible, cumple con los estándares y es muy fácil de manipular. Realmente parece el mejor método posible. Si serialize , modifica , copia sus etiquetas o hace casi cualquier otra cosa, los data permanecerán adjuntos, copiados, etc.
El único problema es que no puedes almacenar objetos no serializables de esa manera , y puede haber límites si pones algo realmente enorme allí.
Una segunda forma es usar atributos falsos como: <a articleid=''5'' href="link/for/non-js-users.html">
Esto es más elegante, pero no cumple con los estándares, y no estoy 100% seguro de soporte. Muchos navegadores lo admiten por completo, creo que IE6 es compatible con el acceso JS pero no los selectors CSS (lo que realmente no importa aquí), tal vez algunos navegadores estén completamente confundidos, debe verificarlo.
Hacer cosas divertidas como serializar y deserializar sería aún más peligroso.
El uso de ids para puros hash JS funciona principalmente, excepto cuando intentas copiar tus etiquetas. Si tiene la tag <a href="..." id="link0"> , <a href="..." id="link0"> a través de métodos JS estándar y luego intente modificar los data adjuntos a una sola copia, la otra copia se modificará.
No es un problema si no copia tag o utiliza datos de solo lectura . Si copia tag y se modifican, deberá manejarlas manualmente.
Una posibilidad podría ser:
- Crea un nuevo div para guardar todos los datos extendidos / arbitrarios
- Haga algo para asegurarse de que este div sea invisible (por ejemplo, CSS más un atributo de clase del div)
- Coloque los datos extendidos / arbitrarios dentro de las etiquetas HTML [X] (por ejemplo, como texto dentro de las celdas de una tabla, o cualquier otra cosa que pueda desear) dentro de este div invisible
Utilizando jquery,
para almacenar: $(''#element_id'').data(''extra_tag'', ''extra_info'');
para recuperar: $(''#element_id'').data(''extra_tag'');