8

script次のようなタグでカスタム属性を使用できますか?

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

そして、含まれている JavaScript を使用してmycustomattribute?の値にアクセスします。

4

4 に答える 4

11

次のようなスクリプト タグでカスタム属性を使用できますか。

はい、data-*属性を使用して:

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

そして、含まれている JavaScript を使用して「mycustomattribute」の値にアクセスしますか?

はい、たぶん。scriptタグにを付けると、id確実に実行できます。

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

それ以外の場合は、script タグについて想定する必要があります。ページのマークアップに常にある場合 (後でコードを使用して追加しない場合)、次のようにできます。

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

これは、スクリプト タグがマークアップ内にある場合、それが検出されるとすぐに実行され (asyncまたはdeferが使用されていない限り、[ブラウザーでサポートされている])、常にページの最後のスクリプト タグになるためです (その時点で)。 . しかし、繰り返しますが、コードが後でスクリプトタグを追加する場合、createElementおよびまたは類似のものを使用するとappendChild、それに頼ることはできません。

完全な例を次に示します:ライブコピー

<!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-21T06:30:22.563 に答える
2

はい、できます。ブラウザーは、どのタグでも認識できない属性を無視する必要があります (ドキュメントが古いブラウザーで新しい機能を使用する場合に適切な劣化を許容するため)。ただし、データセット タグはユーザー用に明示的に予約されているため、今後の HTML の変更と競合しないため、データセット タグを使用することをお勧めします。

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

次に、通常の属性アクセサーを使用してこれにアクセスできます。

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

またはdatasetAPIを使用:

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

(ただし、ドキュメントのブラウザー互換性表を参照してください)。

于 2013-07-21T06:29:10.543 に答える
1

jqueryで取得できるはずです。

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

または、通常の JavaScript を使用してこれを試してください

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

これを実行できるようにスクリプトタグにIDを与えるのは理にかなっているかもしれません

document.getElementById("someId").getAttribute("mycustomattribute");
于 2013-07-21T06:28:11.047 に答える
0

このインスタンス用のライブラリを作成しましたが、非常に使いやすいです。

<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-23T09:29:16.130 に答える