基本的に私が求めているのは、スクリプトタグに id 属性を与えるポイントは何ですか? この識別のために、それらの内部のルーチンを別の方法で呼び出したり参照したりできますか? これにより、スクリプト/ページの動作がおかしくなる問題が発生する可能性はありますか?
9 に答える
は、DOM ツリー内のタグid
のもう 1 つのアクセサーです。<script>
理論的document.getElementById()
には、ノードを取得して削除したり、他の属性を追加したりするために使用できます ( DOM に読み込まれた属性<script>
を変更できるとは思いませんが)。src
ただし、これらの操作には必要ありません。同様id
に、DOM 関数からもアクセスできます。getElementsByTagName("script")
<script>
DOM 操作でタグにアクセスする必要がある場合は、 を使用id
すると少し簡単になります。それ以外の場合、メリットはほとんどありません1。
1これは、任意のid
DOM ノードに属性を追加する場合に当てはまりますが、プレゼンテーションに影響を与えるノードは、タグとは異なり、を対象とする CSS の恩恵を受けることもできます...id
<script>
以前の回答で述べたように、スクリプト タグのコードが実行されると、スクリプト ノードを置換/削除しても、その結果は元に戻されません。
ただし、コードが今まで実行されていない場合は、id が役立ちます。以下はそのようなスクリプトタグです:
<script id="code1" type="text/myjs">.....</script>
ブラウザはこのタイプのスクリプトを認識しないため、その実行は無視されますが、タグとそのコードは引き続き DOM で使用できます。
作業例: http://jsfiddle.net/sv_in/rt9Q2/
これは主にクライアント側のテンプレートに使用されます。Mustache.jsなどのテンプレートは、このようなスクリプト タグに格納されます。コンパイルが必要な場合は、ID を使用してタグから取得されます。このアプローチの利点は、ビュー (テンプレート) とモデル (ビューに表示されるデータを含む js 変数) が完全に分離されていることです。
このプラクティス以外に、スクリプト タグの ID の一般的な用途はありません。
スクリプト要素にid属性を追加すると、2つの特定の目的
があります。1。Webページのソースコードを読み取るときにスクリプトを認識できます。
2. HTMLリファレンスには、識別可能な要素の内容を上書きできるはずであると記載されています(ただし、経験上、実際に上書きできるブラウザーはほとんどありません)。
たとえば、id = "myParticularScript"のスクリプトが既にある場合、同じIDの新しいスクリプト要素を追加すると、古いものが置き換えられ、src属性で指定した新しい(または同じ)ソースが読み込まれます。
JavaScriptの動的ロードの経験から、新しいスクリプトがブラウザーにロードされることが証明されていますが、テストしたブラウザーでは、同じIDを保持する古い要素を置き換えることができませんでした。
つまり、最初の目的は簡単に認識できるということです。私の仕事では、システムを使用してWebページを生成しますが、どのスクリプト(またはcssリンク)がどのコンポーネントによって追加されるかを常に把握しているわけではありません。スクリプトタグとcssリンクタグの両方にIDを追加することでこれを解決しました。これは、認識してシステムまでさかのぼることができたIDです。
スクリプト タグに id を与える意味はありません。ページ上のスクリプトは、ページ上にある順序で実行されるだけです。
script
id
ブックマークレットでタグを使用しました。script
Javascript を介して要素を;とともに追加しDOM
ます。div
それを使用します。Close
& ユーザーが追加したボタンをクリックしたとき/場合div
; ID でこのscript
要素を見つけ、DOM から削除して、見つかったページをそのままにします。
これは、サーバーの src url 属性でリソース ファイルの存在を確認するのに役立つ場合があります。キャッシュ無効化のために、.js および .css ファイルのファイル名を参照する必要があります。これは、サーバーでファイル名が変更されたかどうかをチェックアウトし、コードを介してリロードするのに役立ちます
$window.location.reload()
コード例 (angularjs):
service.reloadApplication = function () {
var script = document.getElementsById("scriptAppMin");
if (!!script.getAttribute('src') && doesFileExist(script.getAttribute('src')) == false)
$window.location.reload();
}
function doesFileExist(fileUrl) {
var xhr = new XMLHttpRequest();
xhr.open('HEAD', fileUrl, false);
xhr.send();
return !(xhr.status == "404");
}