在網頁上包含不顯眼信息的最佳方式

因此，我已經編寫了一些腳本，在我的頁面上設置了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

在網頁上包含不顯眼信息的最佳方式

回答

相關問題