在网页上包含不显眼信息的最佳方式

因此，我已经编写了一些脚本，在我的页面上设置了Google地图。这些脚本包含在我的页面的<head>中，并使用jQuery来构建地图，并使用页面上的地址列表生成标记。在网页上包含不显眼信息的最佳方式

但是，我有一些确切的坐标数据为每个地址的JavaScript需要正确放置标记。这不是我希望在屏幕上向用户显示的信息，那么将数据放入我的文档中的“最佳实践”方式是什么？

2008-12-04 Gareth

我不会推荐使用style来隐藏某些东西，它会显示在没有（或禁用了）css suppor的浏览器中，看起来很奇怪。

你可以将其存储在一个javascript变量或添加一个表单，像这样隐藏值（未使用的表单内，以确保它验证）：

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

至极，你可以阅读和JavaScript的更新。

来源

2008-12-04 10:23:29

+1。清洁，而不是哈克。适用于任何浏览器。 – 2008-12-04 10:41:52

其实，使用表单并不是一个很好的解决方案，因为它不会在另一个表单中工作。但从其他讨论看来，内联脚本块可能是最有用的解决方案 – Gareth 2009-03-01 11:46:04

如果您需要实际提交的表单内的值，请将隐藏值放在那里。如果你不需要提交它们，只需通过JS读取并写入它们就可以将它们放在一个单独的表单中。（表单只是为了让输入标签验证无论如何..） – 2009-03-09 08:23:08

如果信息对用户不可见，则不应保留在文档中。例如，数据可以保留在脚本区域中。但是，如果由于各种原因，这是不可能的，你可以使用div = style =“display：none”来隐藏信息。

来源

2008-12-04 10:14:35 Aleris

我的第一个想法是一个带有CSV或类似数据的隐藏输入。由于数据不是真的秘密，只是不显示。

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

然后与jquery访问它

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

编辑：下面答案甲提到JSON这将是更好的解决方案使用如在另一种答案指出多个隐藏的输入组合。

来源

2008-12-04 10:19:30

加雷，你可能想看看JSON上http://www.json.org/

从中得到了强大的服务器端支持，你应该在未来决定动态加载坐标紧凑的利益

除了使用HTTPRequest这将是很容易做到这一点，而不必修改现有的脚本太多。

JSON - JavaScript Object Notation实际上是序列化JavaScript对象的本地方式。

这里的一些例子： http://www.json.org/example.html

你甚至可以全部地址infromation的存储记录在JSON对象的JavaScript数组并动态地构建屏幕上的列表中。这将使您能够在“运行时”以任何您需要的方式排序，过滤和处理easilly地址。

的替代方式将拥抱每个地址与标签（一个简单的DIV都行）和引入含有的坐标标签的新属性：

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

然后

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

如果您希望或为每个坐标添加两个属性或保留逗号分隔列表等，您可以将第二种方法与JSON（存储坐标对象）结合使用。

第二种方法也很好地降解，并且搜索机器人友好。

来源

2008-12-04 10:28:05

既然你已经有Jquery，为什么不直接调用另一个页面/脚本的AJAX来获取坐标数据呢？

来源

2008-12-04 10:30:23 UnkwnTech

数据总是对想要查看它的人可见。试图隐瞒它只会减慢那些不擅长的人。我的建议是不要使用XHR，因为这对很多人来说很慢，并且总是会增加页面加载的时间，应该尽量减少。使用数组。

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]); 
}

有点儿事吗？

来源

2008-12-04 10:55:32 Supernovah

保持Javascript或JSON中的数据缺少关于不引人注意的Javascript的观点。关于“不引人注目”的关键事情之一是，当Javascript不存在时，优雅地退化 - 理想情况下，当CSS不存在时。出于这个原因，你应该把数据放在文件中，而不是在Javascript，所以用户可以看到它。

此外，您应该将其呈现在没有任何CSS的干净整洁的表格或div结构中。在这种情况下，表格可能是表示这种数据的正确语义结构。您可以进一步为那些拥有CSS但不包含Javascript的人设计表格。然后，Javascript可以轻松解析数据并将其放入地图中，但如果Javascript不受支持，数据仍将显示。

另一个好处是，它很容易被诸如搜索引擎之类的机器人和任何想要编写第三方混搭的人抓取。（如果你不想分享它，你可以看到这是一个缺点，但如果有人想要足够的数据，他们会从页面中获得）。它也将以整齐的形式呈现给使用屏幕阅读器的视障用户。

现在你不想让表格默认显示，所以你必须使用CSS隐藏它。但是，如果用户拥有CSS而不是Javascript呢？那么你可能想要显示桌子......这就是优雅的降级。所以，你要做的是使表在CSS可见（即没有明确地隐藏它），然后运行一些JavaScript代码来隐藏它的初始化：

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

或某些特定库当量，例如

$("geodata").hide()

唯一的问题是，如果你在document.onload（）中运行这个表，那么这个表就会显示几秒钟。因此，请在输出表格后将其包含在脚本标记中。这是一种可以在HTML中包含脚本标记的情况。如果你这样做，那么避免使用特定于库的代码，因为在评估内联脚本时，库可能尚未加载。

现在你已经把所有情况： - JS和CSS - 在地图很好地呈现数据 - 没有JS，但CSS - 数据很好地呈现表 - 无JS无CSS - 在原始的HTML呈现数据表（另一种情况下，JS和没有CSS很少出现，你可以处理它，如果你喜欢，但有点毫无意义）

你的Javascript代码也将是干净的，因为它解析一个整洁的数据结构。您可以在开发过程中轻松检查表格，看看它是否有正确的数据，以及地图是否正确反映了这些数据。

来源

2008-12-04 13:27:49 mahemoff

在网页上包含不显眼信息的最佳方式

回答

相关问题