A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/URI/Reference/Schemes/javascript below:

javascript: URL - URI | MDN

javascript: URL

警告: ウェブ上で javascript: URL を使用することは推奨されていません。これは、eval()を使用することによる影響と同様に、任意のコードが実行される可能性があるためです。また、通常のリンク動作とは異なるため、アクセシビリティが縮小する可能性があります。

JavaScript URL、つまり javascript: スキームを接頭辞とする URL は、ブラウザーがナビゲートしようとした際に JavaScript を実行する擬似的なナビゲーション対象として使用されます。 URL が文字列として評価された場合、HTML として扱われ、ブラウザーによってレンダリングされます。

構文
javascript:

この URL のスキームです。

<script>

実行する JavaScript コード。コードはスクリプトとして解釈されます。

解説

javascript: URL は、URL がナビゲーション対象とする場所であればどこでも使用することができます。これには以下を含めることができますが、これに制限されるものではありません。

メモ: 他にも、<link> 要素の href 属性のように、URL を使用するコンテキストもありますが、これらはリソースの場所であり、ナビゲーションの対象ではないため、javascript: URL は許可されていません。このような用途で JavaScript をインラインで書きたい場合は、data: URL と text/javascript MIME タイプを使用してください。

ブラウザーがそのような場所に移動しようとすると、スクリプト本体を解釈し実行します。スクリプトは、eval() で実行された場合と同じ値である、補完値（返値ではありません）を持つことができます。最後の文が式の場合は、補完値はその式の値となります。この補完値が文字列の場合は、その文字列は HTML 文書として扱われ、ブラウザーは現在のページと同じ URL を使用して、そのコンテンツを含む新しい文書に移動します。履歴項目は作成されません。補完値が文字列でない場合、ブラウザーはコードを実行するだけで、移動はしません。そのため、スクリプトが javascript:foo() のように関数を呼び出すことで終わっている場合、関数が文字列を返す可能性がある場合に誤って移動しないように、void を接頭辞として付けることが推奨されることがよくあります。

JavaScript でのナビゲーションは、コンテンツセキュリティポリシー の設定、具体的には script-src によってブロックされる場合があります。

例 javascript: URL を href の対象として使用

この例では、<a> 要素の href 属性を javascript: URL に設定し、クリックするとメッセージを表示するようにします。

<a href="javascript:alert('Hello, world!')">クリックしてね</a>

alert() が undefined を返すため、ブラウザーは新しいページに移動しません。これは、リンクが実際にはハイパーリンクではないため、好ましくない方法です。代わりにボタンにすることを検討してください。

<button id="btn">クリックしてね</button>
<script>
  document.getElementById("btn").addEventListener("click", () => {
    alert("Hello, world!");
  });
</script>

例えば、<a> 要素の href 属性を javascript: URL に設定すると、"Hello, world!" というコンテンツを持つ新しいページに移動します。

<a href="javascript:pageContent">クリックしてね</a>
<script>
  // var を使用するとグローバル変数となり、他の場所でも読み取ることができます。
  var pageContent = "Hello, world!";
</script>

なお、javascript: URL は履歴項目を作成しないため、前回ページに戻るには再読み込みする以外の方法はありません。

javascript: URL をフォーム処理として使用

この例では、<form> 要素の action 属性を javascript: URL に設定し、送信するとメッセージが表示されるようにします。

<form action="javascript:alert(myInput.value)">
  <input id="myInput" />
  <input type="submit" value="Submit" />
</form>

これを行う代わりに、フォームを送信する submit イベントを待ち受けし、JavaScript で処理することを検討してください。

<form id="myForm">
  <input id="myInput" />
  <input type="submit" value="Submit" />
</form>
<script>
  document.getElementById("myForm").addEventListener("submit", (event) => {
    event.preventDefault();
    alert(document.getElementById("myInput").value);
  });
</script>
javascript: URL を iframe のソースとして使用

この例では、<iframe> 要素の src 属性に、コンテンツ "Hello, world!" を含む新しいページにナビゲートする javascript: URL を設定します。

<iframe src="javascript:pageContent"></iframe>
<script>
  // var を使用するとグローバル変数となり、他の場所でも読み取ることができます。
  var pageContent = "Hello, world!";
</script>

その代わりに、srcdoc 属性を設定することを検討してください。

<iframe id="myFrame"></iframe>
<script>
  document.getElementById("myFrame").srcdoc = "Hello, world!";
</script>
javascript: URL を window.location で使用

この例では、window.location プロパティを javascript: URL に設定し、"Hello, world!" というコンテンツを含む新しいページに移動します。

window.location = "javascript:'Hello world!'";

これを行う代わりに、DOM API を使用してページコンテンツを変更することを検討してください。例えば次のようにします。

document.body.textContent = "Hello, world!";
仕様書 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4