通過隱藏在html中包含datanode：好主意？

我想將數據添加到只會動態顯示的html頁面（通過jquery）。數據是xml（所以實際上是html dom的一部分）。通過隱藏在html中包含datanode：好主意？

現在我做到這一點，通過CSS（.data { display:none; }）與HTML隱藏它像：

<div id="section1"> 
<h2>Section 1</h2> 
    <p>A visible paragraph </p> 
    <!-- data that has to do with section 1 --> 
    <data class="data"> 
     <eg1>some data</eg1> 
     <eg2>more data</eg2> 
    </data> 
</div>

的數據未顯示，可以通過jQuery的輕鬆抵達。

雖然這似乎很好地工作，我現在想知道，在過程的早期，如果這種工作方式也有一些缺點，我沒有想到的，現在......

UPDATE：

當然，它也是關於非html標籤的。但我可以使用

<div class="data">  
<div class="eg1>

一樣容易：但即使如此，問題仍然存在。

感謝您的所有意見！

來源

2011-02-24 Peter

投票贊成的好問題。這可能是某個wiki的某天 – Tarun 2011-02-25 08:21:19

缺點是沒有非js後備。爲了健壯的代碼，你會做的是創建靜態HTML，以便顯示所有內容。然後你使用Javascript來隱藏「隱藏」的數據，並允許用戶通過links/fns/whatever再次顯示它。

這很有用，因爲沒有Javascript的用戶仍然可以看到所有的內容，以及對可見性進行解釋的搜索引擎抓取工具（或其他抓取工具/機器人）也可能會發現它很有用。

來源

2011-02-24 09:08:23 Kissaki

當非js時：數據不能顯示 – Peter 2011-02-24 09:11:27

然後你很好走。請記住，它仍然在源代碼中。 Ppl可能會檢查它，以及爬蟲。另一種方法是異步JS，稍後通過XHR加載數據。 – Kissaki 2011-02-24 09:14:04

+1然而：所有的想法都是最好的 – Peter 2011-02-24 09:15:29

這是一個壞主意。好的想法是使用一種形式

<form name="data"> 
<input type="hidden" name="eg1" value="Some data" /> 
<input type="hidden" name="eg2" value="Some data" /> 
</form>

您可以輕鬆地通過jQuery訪問它通過使用document.data.eg1和document.data.eg2等

一旦你需要顯示的數據，通過jQuery把它拿來和填充的div。

編輯：如果你需要把它標記，而不是隱藏輸入字段，如果你已經在使用jQuery使用一個定義列表

<dl> 
    <dt>eg1</dt><dd>Somedata</dd> 
    <dt>eg2</dt><dd>Somedata</dd> 
    <dt>eg3</dt><dd>Somedata</dd> 
</dl>

來源

2011-02-24 09:08:49 Tarun

不好的主意，爲什麼要？ – Peter 2011-02-24 09:10:21

，因爲當一個搜索引擎讀取你的頁面時，它不會給CSS更多的偏好。它將讀取數據並加載它。雖然將它作爲params而不是HTML文本將確保搜索引擎很好地對待它。 – Tarun 2011-02-24 09:11:53

+1有用備註 – Peter 2011-02-24 09:16:25

，你應該去jQuery.data()（HTTP：// api.jquery.com/jQuery.data/）將數據存儲在視圖模型中。

你可以這樣做：

jQuery.data('myvar', 'myvalue');

，然後使用

var myval = jQuery.data('myvar');

您還可以將您的DOM中的數據元素把它抓回來只是（它仍然是不可見的）：

$('#my-data-div').data('whatever', 'somevalue');

和檢索：

var myval = $('#my-data-div').data('whatever');

希望這會有所幫助！:)

來源

2011-02-24 09:18:43

相似;你可能想要使用'data-'屬性。請參閱http://html5doctor.com/html5-custom-data-attributes/ – Kissaki 2011-02-24 09:21:55

@kissaki：但這是html5？ – Peter 2011-02-24 09:24:12

@Peter數據屬性是HTML5規範，是的，但是它們對任何網站和jQuery都可以正常工作。基本上你可以在標籤中放入任何你想要的東西。唯一的問題是，它不會驗證舊的HTML標準... – 2011-02-24 09:25:37

通過隱藏在html中包含datanode：好主意？

回答

相關問題