<noscript> …… スクリプトが無効な環境向けの内容を表す

<noscript>タグは、スクリプトが無効な環境向けの内容を表す際に使用します。

noscript要素は、スクリプトが有効な場合は何も表しませんが、スクリプトが無効な場合はその内容を表します。 noscript要素を使用すると、スクリプトをサポートしないユーザーエージェント向けのマークアップを提供できます。

noscript要素は HTML構文でのみ有効であり、XML構文では無効です。 XMLドキュメントでは、noscript要素を使用してはなりません。

■使用例

以下のサンプルは、スクリプトが無効な場合のフォールバックを提供するために、noscript要素が使用されています。 スクリプトが有効な場合には数字入力と同時に計算結果が表示されますが、 スクリプトが無効な場合にはサーバー側で計算を行うための送信ボタンが表示されます。

<form action="calcSquare.php">
 <p>
  <label for=x>数字を入力</label>:
  <input id="x" name="x" type="number">
 </p>
 <script>
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = '二乗になります';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' の二乗は ' + v * v;
  };
 </script>
 <noscript>
  <input type=submit value="二乗を計算！">
 </noscript>
</form>

■使用例

以下のサンプルは、noscript要素を使用しないでフォールバックを提供する方法です。 XMLドキュメントではnoscript要素が許可されていないため、以下の手法はXMLドキュメントでも役立つでしょう。

<form action="calcSquare.php">
 <p>
  <label for=x>Number</label>:
  <input id="x" name="x" type="number">
 </p>
 <input id="submit" type=submit value="Calculate Square">
 <script>
  var x = document.getElementById('x');
  var output = document.createElement('p');
  output.textContent = 'Type a number; it will be squared right then!';
  x.form.appendChild(output);
  x.form.onsubmit = function () { return false; }
  x.oninput = function () {
    var v = x.valueAsNumber;
    output.textContent = v + ' squared is ' + v * v;
  };
  var submit = document.getElementById('submit');
  submit.parentNode.removeChild(submit);
 </script>
</form>

■関連項目

Sponsors