我應該在哪個HTML元素中放置頁面全局數據屬性？

Question

我想，將其置於一個元素的數據屬性，像這樣從服務器傳遞一些數據到瀏覽器：

<div id="globalvars" data-attr1="val1"></div> 

但我覺得應該有比div使用更好的元素。 body想到了，但我碰巧使用Django模板生成我的頁面，並且當我知道globalvars的值時，body標記已經發出。

Answer 1

取決於你想傳遞什麼類型的數據：

對於一個簡單的字符串，在一個空<div>數據屬性可能是不夠的。

如果是例如JSON數據，你可能希望把它作爲一個<script type="text/json">的文本內容和訪問它像這樣：

<script type="text/json" id="mydata"> 
    { "your_data": "goes here" } 
</script> 

<!-- ... --> 

<script type="text/javascript"> 
(function(){ 
    var data = JSON.parse(document.getElementById('mydata').innerHTML); 
    //do stuff with your data 
})(); 

</script> 

這是通過文字腳本的常見方式，它往往用於模板，但也可用於任意數據。

type="text/json"防止第一個<script>被瀏覽器評估。該類型的屬性應該符合您計劃投入的任何內容。例如，對於純文本，您將使用text/plain。只要它不是瀏覽器將解釋爲實際腳本的類型，那就沒有問題。