javascript: URL

JavaScript URL は javascript: スキームで始め、JavaScript コードが続きます。 コードはスクリプトとして解釈されます。

javascript:<script>

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

• <a> または <area> 要素の href 属性。
• <form> 要素の action 属性。
• <iframe>要素の src 属性。
• JavaScript の window.location プロパティ。
• ブラウザーのアドレスバー自体。

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

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

この例では、<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 は履歴項目を作成しないため、前回ページに戻るには再読み込みする以外の方法はありません。

この例では、<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>

この例では、<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>

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

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

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

document.body.textContent = "Hello, world!";

• URI
• コンテンツセキュリティポリシー (CSP)
• IANA list of URI schemes