Meilleure façon d'inclure des informations discrètes sur une page Web

J'ai donc écrit des scripts pour configurer une carte Google sur ma page. Ces scripts sont inclus dans le <head> de ma page, et utilisent jQuery pour construire la carte avec des marqueurs générés à partir d'une liste d'adresses sur la page.Meilleure façon d'inclure des informations discrètes sur une page Web

Cependant, j'ai des données de coordonnées exactes pour chaque adresse dont le javascript a besoin pour placer les marqueurs correctement. Ce n'est pas une information que je veux être visible sur l'écran de l'utilisateur, alors quelle est la meilleure façon de mettre ces données dans mon document?

Source

2008-12-04 Gareth

Je ne recommanderais pas d'utiliser le style pour cacher quelque chose, il apparaîtra dans les navigateurs sans (ou avec désactivé) css suppor et paraître étrange.

Vous pouvez stocker dans une variable javascript ou ajouter une forme avec des valeurs cachées comme celle-ci (à l'intérieur d'un formulaire utilisé pour être sûr qu'il valide):

<form action="#" method="get" id="myHiddenValues"> 
    <input type="text" name="hiddenval1" id="hiddenval1" value="1234"/> 
    <input type="text" name="hiddenval2" id="hiddenval2" value="5678"/> 
</form>

Wich vous pouvez lire et mettre à jour de javascript.

Source

2008-12-04 10:23:29

+1. Propre et pas hacky. Fonctionne dans n'importe quel navigateur. –

En fait, l'utilisation d'un formulaire n'est pas une excellente solution car elle ne fonctionnera pas sous une autre forme. Mais d'après l'autre discussion, il semble qu'un bloc de script en ligne est probablement la solution la plus utile. – Gareth

Si vous avez besoin des valeurs dans un formulaire que vous soumettez, placez les valeurs cachées. Si vous n'avez pas besoin de les soumettre, il suffit de les lire et de les écrire dans JS, les placer dans un formulaire séparé. (Le formulaire est juste là pour valider les balises d'entrée de toute façon ..) –

Si les informations ne doivent pas être visibles par l'utilisateur, elles ne doivent pas rester dans le document. Les données peuvent rester dans une région de script par exemple. Cependant, si pour diverses raisons cela n'est pas possible, vous pouvez utiliser un div avec style = "display: none" qui cachera l'information.

Source

2008-12-04 10:14:35 Aleris

Ma première pensée était une entrée cachée avec un fichier CSV ou similaire des données. Puisque les données ne sont pas vraiment secrètes, pas pour l'affichage.

<input id="coordinates" type="hidden" value="123.2123.123:123,123,321;....." />

avec ensuite accéder à jquery

var myCoordsCSV = $("#coordinates").val();

Edit: A ci-dessous mentionne réponse JSON qui serait une meilleure solution combinée à l'utilisation de multiples entrées cachées comme l'ont souligné dans une autre réponse.

Source

2008-12-04 10:19:30

Gareth, vous pouvez jeter un oeil à JSON sur http://www.json.org/

Outre l'avantage de la compacité, il a obtenu un fort soutien côté serveur et si vous décidez de l'avenir de charger les coordonnées dynamiquement En utilisant HTTPRequest, il serait très facile de le faire sans avoir à modifier le script existant. JSON - JavaScript Notation d'objet est effectivement un moyen natif de sérialisation des objets JavaScript.

Quelques exemples ici: http://www.json.org/example.html

Vous pouvez même stocker tous les infromation d'adresse dans un tableau JavaScript d'objets enregistrés dans JSON et construire dynamiquement la liste à l'écran. Cela vous donnera la possibilité de trier, filtrer et manipuler les adresses facilement de la manière dont vous avez besoin au moment de l'exécution.

La alternative serait d'embrasser chaque adresse avec une étiquette (simple div fera) et d'introduire un nouvel attribut pour la balise contenant les coordonnées:

<div id="addr1" coordinates="..."> 
    17 Coldwell Drive<br /> 
    Blue Mountain<br /> 
    BA93 1PF<br /> 
    United Kindom 
</div>

puis

var myCoordsCSV = $("addr1").coordinates;

Vous pouvez combiner la seconde approche avec JSON (objet coordonnées de magasin) si vous le souhaitez ou ajouter deux attributs pour chaque coordonnée ou conserver une liste délimitée par des virgules, etc.

La deuxième approche se dégrade également bien et est compatible avec les robots de recherche.

Source

2008-12-04 10:28:05

Bien sûr, mais quel que soit le format, l'intégration

Puisque vous avez déjà Jquery, pourquoi ne pas simplement faire un appel AJAX à une autre page/script pour obtenir les données de coordonnées?

Source

2008-12-04 10:30:23 UnkwnTech

Les données seront toujours visibles par quelqu'un qui veut y accéder. Essayer de le cacher ne fera que ralentir ceux qui n'y sont pas adeptes. Ma suggestion est de ne pas utiliser XHR car c'est lent pour beaucoup de gens et ajoute toujours du temps au chargement de la page, quelque chose que vous devriez essayer de minimiser. utilisez un tableau.

var myArray = new Array(); 
myArray.push([1.000,1.000,"test1"]); 
myArray.push([2.000,2.000,"test2"]); 
myArray.push([3.000,3.000,"test3"]); 
for(i=0;i<myArray.length;i++){ 
    yourGoogleMapsAPICall(myArray[i][0],myArray[i][1],myArray[i][2]); 
}

une sorte de chose ya?

Source

2008-12-04 10:55:32 Supernovah

Garder les données dans Javascript ou JSON manque le point sur Javascript discret. L'une des choses clés de "discret" est de se dégrader gracieusement quand Javascript n'est pas présent - et idéalement quand CSS n'est pas présent non plus. Pour cette raison, devrait mettre les données dans le document, pas en Javascript, de sorte que les utilisateurs peuvent le voir.

En outre, vous devriez le présenter dans une structure de table ou div qui semble propre sans CSS. Dans ce cas, une table est probablement la structure sémantique correcte pour représenter ce type de données. Vous pouvez encore styliser la table pour ceux qui ont CSS mais pas Javascript. Le Javascript peut alors facilement analyser les données et les mettre dans la carte, mais si Javascript n'est pas supporté, les données seront toujours affichées.

Un autre avantage est que les robots tels que les moteurs de recherche et tous ceux qui veulent écrire un mashup tiers peuvent facilement le scraper. (Vous pourriez voir que c'est un inconvénient si vous ne voulez pas le partager, mais si quelqu'un veut assez de données, il l'obtiendra de la page de toute façon.) Il sera également disponible pour les utilisateurs malvoyants utilisant des lecteurs d'écran. .

Maintenant, vous ne voulez pas rendre la table visible par défaut, vous devrez donc la cacher en utilisant CSS. Mais que faire si un utilisateur a CSS, mais pas Javascript? Ensuite, vous voulez probablement montrer la table ... c'est ce que dégradent gracieusement. Alors ce que vous faites est de rendre visible la table dans le CSS (ie ne cache pas explicitement), puis d'exécuter certains Javascript pour le cacher à l'initialisation:

document.getElementById("geodata").style.display = "none";

ou un équivalent spécifiques à la bibliothèque, par exemple

$("geodata").hide()

Le seul problème est que si vous l'exécutez dans document.onload(), la table sera visible pendant quelques secondes. Donc, incluez-le dans une balise de script juste après la sortie de la table. C'est une situation où il est correct d'inclure une balise de script dans le code HTML.Si vous faites cela, alors évitez en utilisant du code spécifique à la bibliothèque car la bibliothèque n'a peut-être pas encore été chargée au moment où votre script en ligne est évalué.

Maintenant vous avez tous les cas couverts: - JS et CSS - données présentées bien sur la carte - pas JS, mais CSS - données présentées bien la table - pas JS et pas CSS - données présentées dans un HTML brut

Votre code Javascript sera également propre, car il analyse une structure de données construite de manière soignée. Vous pouvez facilement inspecter la table pendant le développement pour voir si elle a les bonnes données et si la carte reflète correctement ces données.

Source

2008-12-04 13:27:49 mahemoff

Votre réponse est certainement le genre de réponse que je recherchais, mais en ce qui nous concerne, les données géographiques ne sont * pas * toujours pertinentes pour l'utilisateur, et ne devraient pas être visibles dans aucun repli. Je suis content que les données soient récupérables par la machine - c'est exactement ce que mon script jQuery va faire pour construire la carte. – Gareth

Heureux que c'était utile. Je ne suis pas sûr que je suis ce que vous voulez dire par discret dans ce cas ... cela signifie beaucoup plus que de cacher le contenu lorsque JS n'est pas présent. Si les données sont précieuses pour quelqu'un sous forme de carte, il est probablement utile aux personnes sans JS ou handicapées qui empêchent de voir la carte. – mahemoff

L'une des choses clés sur "discret" se dégrade gracieusement lorsque Javascript n'est pas présent - Ce n'est pas pertinent dans ce cas, si javascript n'est pas activé, google maps ne fonctionnera pas et ces données sont inutiles. Ce n'est pas comme présenter des données de coordonnées brutes à l'utilisateur est une dégradation acceptable – micmcg

Questions connexes

Meilleure façon d'inclure des informations discrètes sur une page Web

Répondre

Questions connexes