自定義屬性

我可以使用自定義屬性，在腳本標籤，如：自定義屬性

<script type="text/javascript" mycustomattribute="foo"> 
    //javascript 
</script>

然後使用包含JavaScript來訪問「mycustomattribute」的價值？

來源

2013-07-21 tonejac

我已經回答了你的問題，但*爲什麼*你想這樣做？如果我們知道爲什麼，我們可能會提出一個更好的選擇。 –

備註：如果類型爲「text/javascript」，沒有理由擁有'type'屬性，那隻會浪費帶寬。 [這是默認]（http://www.w3.org/TR/html5/scripting-1.html#attr-script-type），普遍。 –

謝謝@ T.J.Crowder。我正在撰寫一個「嵌入此葡萄酒評論」小工具。目前我正在使用iframe，但我希望能夠更好地與用戶的網站佈局一起流動。所以我使用JavaScript代碼寫入代碼。但我需要一種可靠的方式來讓用戶的葡萄酒評論的唯一ID可用於JavaScript。（例如[鏈接] http://www.napawapa.com/reviews/view/Yp/2006-Opus-One [/ link] – tonejac

我可以使用自定義屬性，在腳本標籤，如：

是，使用data-* attributes：

<script data-info="the information"...

然後使用包含JavaScript來訪問的價值'mycustomattribute'？

是的，可能。如果你給script標籤的id，您可以可靠地做到這一點：

var info = document.getElementById("theId").getAttribute("data-info");

否則，您必須做出關於腳本標記假設。如果它總是在頁面（後來使用代碼不添加）的標記，你可以這樣做：

var scripts = document.getElementsByTagName("script"); 
var info = scripts[scripts.length - 1].getAttribute("data-info");

這是因爲，如果腳本標籤的標記，它只要它遇到運行的（除非async or defer使用[並且由瀏覽器支持]），並且將始終是頁面上的最後一個腳本標記（在該時間點）。但是，如果代碼添加腳本標記後面，使用createElement和appendChild或類似，您不能依賴。

這裏有一個完整的例子：Live Copy

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>Data on Script Tags</title> 
</head> 
<body> 
    <script> 
    function display(msg) { 
     var p = document.createElement('p'); 
     p.innerHTML = String(msg); 
     document.body.appendChild(p); 
    } 
    </script> 
    <script data-info="first"> 
    (function() { 
     var scripts = document.getElementsByTagName("script"); 
     var info = scripts[scripts.length - 1].getAttribute("data-info"); 
     display("Got info '" + info + "'"); 
    })(); 
    </script> 
    <script data-info="second"> 
    (function() { 
     var scripts = document.getElementsByTagName("script"); 
     var info = scripts[scripts.length - 1].getAttribute("data-info"); 
     display("Got info '" + info + "'"); 
    })(); 
    </script> 
</body> 
</html>

來源

2013-07-21 06:30:22

在得到「最後一個」腳本時必須做出的假設之一是這種情況：http://stackoverflow.com/questions/14409982/is-it-the-last-script-element-the-currently-running-腳本＃14410368 – Alohci

@Alohci：良好的鏈接。爲什麼我不喜歡在各處放置腳本標籤，並且肯定從不嵌套在內容中（除了在關閉''標籤之前除外）之所以有很多原因之一。我知道這就是有些人喜歡做的事情，包括一些你幾乎不得不尊重的人（例如Google Closure Library工程師），但它會導致這種事情... –

你應該得到它使用jQuery

$("script").attr("mycustomattribute");

或者嘗試這種使用常規的JavaScript

document.getElementsByTagName("script")[0].getAttribute("mycustomattribute");

也許烘烤感給script標籤的ID是能夠做到這一點

能

document.getElementById("someId").getAttribute("mycustomattribute");

來源

2013-07-21 06:28:11 TGH

是的，這是真的，但這將是一個嵌入在外部網站的腳本塊，不保證jquery存在:( – tonejac

好的，我做了一個更新 – TGH

這個答案有什麼問題？ – TGH

是的，你可以這樣做。瀏覽器必須忽略它們在任何標籤中無法識別的屬性（以便在文檔對舊瀏覽器使用新功能時可以適度降級）。但是，使用數據集標記會更好，因爲這些標記明確地保留給用戶，所以它們不會與將來的HTML更改衝突。

<script id="myscript" type="text/javascript" data-mycustomattribute="foo">

然後，您可以訪問此要麼使用普通的屬性訪問器：

document.getElementById("myscript").getAttribute("mycustomattribute")

或與dataset API：

document.getElementById("myscript").dataset.mycustomattribute

（但看到文檔中的瀏覽器兼容性表）。

來源

2013-07-21 06:29:10 Barmar

這並不回答這個問題（如何訪問JS中的屬性） –

@DannyBeckett他問「如果」，而不是「如何」，我假定他已經知道如何，只是想知道是否有任何限制這樣做與腳本標籤。 – Barmar

一個例子將很好代表你的答案。 –

我建了一個library這很實例，它很容易使用：

<script id="your-library" src="./your-library.js" data-car="pagani" data-star-repo="yes, please :)">

，然後你可以得到的數據：

/** 
* This returns the following: 
* 
* { 
* car: 'pagani', 
* starRepo: 'yes, please :)' 
* } 
*/ 

ScriptTagData.getData('your-library'); 


/** 
    * This returns the juust <script> tag 
    */ 

ScriptTagData.getData('your-library');

您可以通過Bower，CDN或只需要下載代碼：https://github.com/FarhadG/script-tag-data

來源

2015-11-23 09:29:16 Vendetta

請做評論[如何提供個人開放在您的圖書館發佈更多問題之前，請使用https://meta.stackexchange.com/q/229085）。 –

回答

相關問題