HTMLにおけるscriptタグの役割は何ですか? scriptタグでのtype属性の使い方は何ですか?-htmlチュートリアル-php.cn

HTMLにおけるscriptタグの役割は何ですか? scriptタグでのtype属性の使い方は何ですか?

寻∝梦

リリース： 2018-08-16 18:02:50

オリジナル

12827 人が閲覧しました

HTMLにおけるscriptタグの役割は何ですか? scriptタグでのtype属性の使い方は何ですか?この記事では、HTML Script タグの関連知識と機能、および script タグの type 属性の使用法について主に説明します

HTML Script タグの関連知識と機能:

script についてどれくらい知っていますか。頻繁に使用されるタグ? このスクリプトタグが改良されると、async や defer、crossorigin、for/event などの HTML5 の機能が追加されます。

おそらくご存知のとおり、script タグは、Web ページ上で実行する JavaScript を指定するために使用されます。スクリプトタグには、JavaScript コードを直接含めることも、JavaScript の外部 URL を指すこともできます。

スクリプトタグは、出現する順序で実行されます。次のコードは、これを直観的に示しています:

<script>
  var x = 3;
</script>
<script>
  alert(x);
  // Will alert &#39;3&#39;;
</script>

ログイン後にコピー

外部リンクリソースを使用する場合、読み込み順序はそれほど直感的ではありませんが、それでも当てはまります:

<script src="//typekit.com/fj5j4j3.js"></script>
<!-- 在Type套件已执行或超时之前，此第二脚本不会执行。 -->
<script src="//my.site/script.js"></script>

ログイン後にコピー

それらを混在させる場合、このルールが適用されます。外部リンクとインライン JavaScript に同様に適用されます。

これは、Web サイトのページの前半で読み込まれる遅いスクリプトがある場合、ページの読み込みが大幅に遅くなるということを意味します。これは、後でロードされたスクリプトが、以前にロードされたスクリプトに依存する可能性があることも意味します。

ページ要素は、その前のすべてのスクリプトが読み込まれるまでレンダリングされません。これは、Web ページが読み込まれる前に、それによって引き起こされるパフォーマンスの問題を気にしない限り、あらゆる種類のクレイジーな操作を Web ページ上で行うことができることを意味します。

ただし、このルールは、Web ページが読み込まれた後に document.appendChild などのメソッドを介して DOM にスクリプトタグを追加する場合には適用されません。これらのタグはブラウザのリクエスト処理の完了に応じてスクリプトを順番に実行するため、読み込み順序は保証されなくなります。

script タグが実行されると、その前の HTML 要素にアクセスできます (ただし、その後の HTML 要素はまだ利用できません)

<html>
  <head>
    <script>
      // document.head is available
      // document.body is not!
    </script>
  </head>
  <body>
    <script>
      // document.head is available
      // document.body is available
    </script>
  </body>
</html>

ログイン後にコピー

HTML パーサーがタグによってドキュメントタグにアクセスし、script タグを解析するときに実行することを想像できます。すぐにJavaScriptを使用します。これは、現在のスクリプトの前に開始タグが表示される DOM ノードのみが、現在の JavaScript で (querySelectorALl、jQuery などを介して) アクセスできることを意味します。

有益な結果として、Web ページ上に記述された JavaScript では document.head がほぼ常に使用可能になります。 document.body は、タグ内または後に script タグを記述した場合にのみ使用できます。

HTML5 では、スクリプトの実行を制御する 2 つのツールが追加されています。

async は「すぐには実行しない」という意味です。より具体的に言うと、ページ全体が読み込まれた後でこのスクリプトを他のスクリプトの後に実行しても問題ありません。ページ上の他のコードが統計スクリプトの実行に依存する必要がないため、これは統計分析スクリプトに非常に役立ちます。非同期コードが実際にいつ実行されるかを知る方法がないため、ページに必要な変数や関数を定義することは非同期コードでは不可能です。

defer は、「実行する前にページが解析されるまで待つ」ことを意味します。これは、スクリプトを DOMContentedLoaded イベントにバインドすること、または jQuery.ready を使用することとほぼ同じです。このコードが実行されると、DOM 内のすべての要素が使用可能になります。非同期とは異なり、すべての遅延スクリプトは HTML ページに表示される順序で実行され、HTML ページが解析されるまで延期されるだけです。

HTML の script タグでの type 属性の使用:

歴史的に (Netsacpe 2 の誕生以来)、script タグに type=text/javascript が記述されているかどうかは問題ではありません。 type を介して JavaScript 以外の MIME タイプを設定した場合、ブラウザはそれを実行しません。これは、独自の言語を定義したい場合に便利です:

<script type="text/emerald">
  make a social network
    but for cats
</script>

ログイン後にコピー

このコードの実際の実行結果は次のようになります:

<script>
  var codez = document.querySelectorAll(&#39;script[type="text/emerald"]&#39;);
  for (var i=0; i < codez.length; i++)
    runEmeraldCode(codez[i].innerHTML);
</script>

ログイン後にコピー

runEmeraldCode 関数の定義は演習として残しておきます。

特別なニーズがある場合は、メタタグ

<meta http-equiv="Content-Script-Type" content="text/vbscript">

ログイン後にコピー

を渡すか、リクエストで Content-Script-Type ヘッダーを返すことによって、ページ上のスクリプトタグのデフォルトのタイプをオーバーライドすることもできます。

crossoriginを使用できます

完全に標準化されていませんが、一部のブラウザはcrossorigin属性をサポートしています。基本的な考え方は、ブラウザがオリジナル以外のリソースの使用を制限するというものです (同種のリソースは、同じプロトコル、ホスト名、ポートです。例: `http://google.com:80)。

これは、たとえば、競合他社の Web サイトに対して、その Web サイト上のユーザーのアカウントをログアウトするリクエストを行うことを防ぐためです (これは良くありません!)。この問題が script タグに関係しているというのは少し予想外ですが、crossorigin が実装されている場合は、window.onerror イベントにハンドラーを追加するだけで済みます。コンソールにいくつかの警告メッセージが表示され、何かを導入するように求められます。外部スクリプトは導入しないでください。安全なブラウザでは、crossorigin 属性を指定しない限り、外部スクリプトの読み込みはエラーなしで機能します。

crossorgin は魔法のセキュリティトリックではなく、ブラウザで通常の CORS アクセスチェックを有効にし、OPTIONS リクエストを作成し、Access-Control ヘッダーをチェックするだけです。

html スクリプトタグと innerHTML:

通过 DOM 动态添加到页面上的 script 标签会被浏览器执行：

var myScript = document.createElement(&#39;script&#39;);
myScript.textContent = &#39;alert("?")&#39;;
document.head.appendChild(myScript);

ログイン後にコピー

通过 innerHTML 动态添加到页面上的 script 标签则不会被执行：

document.head.innerHTML += &#39;<script>alert("?")</script>&#39;;

ログイン後にコピー

为什么会是这样的原因不是很确定，但是它解决了一个小问题：“是否有一个办法让一个 script 标签在 Chrome 代码检查器中显示但不实际执行？”

【相关推荐】

HTML5中web是什么？web存储中的元素有哪些？

HTML table属性你知道多少，进来了解一下？

以上がHTMLにおけるscriptタグの役割は何ですか? scriptタグでのtype属性の使い方は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。