javascript: URLs

JavaScript-URLs beginnen mit dem Schema javascript: und werden von JavaScript-Code gefolgt. Dieser Code wird als Skript geparst.

javascript:<script>

javascript:-URLs können überall verwendet werden, wo eine URL ein Navigationsziel ist. Dies schließt unter anderem folgende Fälle ein:

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

Wenn ein Browser versucht, zu einer solchen Adresse zu navigieren, wird der Skriptkörper geparst und ausgeführt. Das Skript kann einen Kompletionswert haben (keinen Rückgabewert), der dem Wert entspricht, der resultieren würde, wenn das Skript mit eval() ausgeführt würde. Wenn die letzte Anweisung ein Ausdruck ist, ist der Kompletionswert der Wert dieses Ausdrucks. Wenn dieser Kompletionswert ein String ist, wird dieser als HTML-Dokument behandelt, und der Browser navigiert zu einem neuen Dokument mit diesem Inhalt, wobei dieselbe URL wie die aktuelle Seite verwendet wird. Es wird kein Verlaufseintrag erstellt. Ist der Kompletionswert kein String, 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, diesen mit void zu versehen, um eine unbeabsichtigte Navigation zu verhindern, falls die Funktion zufällig einen String zurückgibt.

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

In diesem Beispiel wird das href-Attribut eines <a>-Elements auf eine javascript:-URL gesetzt, die bei einem Klick eine Meldung ausgibt:

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

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

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

In diesem Beispiel wird 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 Verlaufseinträge erstellen, sodass ein Zurückgehen zur vorherigen Seite ohne Neuladen nicht möglich ist.

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

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

Anstatt dies zu tun, sollten Sie das submit-Ereignis des Formulars abfangen und dieses mit JavaScript verarbeiten:

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

Anstatt dies zu tun, sollten Sie stattdessen das srcdoc-Attribut setzen:

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

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

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

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

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

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