javascript: URLs

JavaScript-URLs beginnen mit dem javascript:-Schema, gefolgt von JavaScript-Code. Der Code wird als Skript geparst.

javascript:<script>

javascript: URLs können überall verwendet werden, wo eine URL ein Navigationsziel ist. Dazu gehören unter anderem:

• Das href-Attribut eines <a>- oder <area>-Elements.
• Das action-Attribut eines <form>-Elements.
• Das src-Attribut eines <iframe>-Elements.
• Die window.location-JavaScript-Eigenschaft.
• Die Adressleiste des Browsers selbst.

Wenn ein Browser versucht, an einen solchen Ort zu navigieren, parst und führt er den Skriptkörper aus. Das Skript kann einen Completion-Wert haben (keinen Rückgabewert), der dem Wert entspricht, wenn das Skript mit eval() ausgeführt würde. Wenn die letzte Anweisung ein Ausdruck ist, ist der Completion-Wert der Wert dieses Ausdrucks. Ist dieser Completion-Wert ein String, wird dieser String als HTML-Dokument behandelt, und der Browser navigiert zu einem neuen Dokument mit diesem Inhalt, indem dieselbe URL wie die aktuelle Seite verwendet wird. Es wird kein Verlaufseintrag erstellt. Wenn der Completion-Wert kein String ist, führt der Browser nur den Code aus und navigiert nicht. Daher wird oft empfohlen, wenn das Skript mit einem Funktionsaufruf wie javascript:foo() endet, es mit void zu präfixieren, um versehentliche Navigation zu verhindern, falls die Funktion zufällig einen String zurückgibt.

Die Navigation mittels javascript: kann durch Content Security Policy-Einstellungen blockiert werden, insbesondere script-src.

In diesem Beispiel ist das href-Attribut eines <a>-Elements auf eine javascript:-URL gesetzt, die beim Klicken eine Nachricht anzeigt:

<a href="javascript:alert('Hello, world!')">Click me</a>

Da alert() undefined zurückgibt, navigiert der Browser nicht zu einer neuen Seite. Dies ist eine schlechte Praxis, da der Link eigentlich kein Hyperlink ist. Erwägen Sie, stattdessen einen Button zu verwenden:

<button id="btn">Click me</button>
<script>
  document.getElementById("btn").addEventListener("click", () => {
    alert("Hello, world!");
  });
</script>

In diesem Beispiel ist das href-Attribut eines <a>-Elements auf eine javascript:-URL gesetzt, die zu einer neuen Seite mit dem Inhalt "Hello, world!" navigiert:

<a href="javascript:pageContent">Click me</a>
<script>
  // Use a var so it becomes a global variable and can be read elsewhere
  var pageContent = "Hello, world!";
</script>

Beachten Sie, dass javascript: URLs keine Verlaufs-Einträge erstellen, es gibt also keine Möglichkeit, zur vorherigen Seite zurückzukehren, ohne die Seite zu aktualisieren.

In diesem Beispiel ist das action-Attribut eines <form>-Elements auf eine javascript:-URL gesetzt, die bei der Übermittlung eine Nachricht anzeigt:

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

Stattdessen sollten Sie das submit-Ereignis des Formulars überwachen und es mit JavaScript behandeln:

<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>

In diesem Beispiel ist das src-Attribut eines <iframe>-Elements auf eine javascript:-URL gesetzt, die zu einer neuen Seite mit dem Inhalt "Hello, world!" navigiert:

<iframe src="javascript:pageContent"></iframe>
<script>
  // Use a var so it becomes a global variable and can be read elsewhere
  var pageContent = "Hello, world!";
</script>

Stattdessen sollten Sie das srcdoc-Attribut einrichten:

<iframe id="myFrame"></iframe>
<script>
  document.getElementById("myFrame").srcdoc = "Hello, world!";
</script>

In diesem Beispiel wird die window.location-Eigenschaft auf eine javascript:-URL gesetzt, die zu einer neuen Seite mit dem Inhalt "Hello, world!" navigiert:

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

Stattdessen sollten Sie DOM-APIs verwenden, um den Seiteninhalt zu ändern. Zum Beispiel:

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

• URIs
• Content Security Policy (CSP)
• IANA-Liste der URI-Schemas