javascript: URLs

javascript:<script>

javascript:

Das Schema der URL.

<script>

Der auszuführende JavaScript-Code. Der Code wird als Skript geparst.

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

• 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 Browser-Adressleiste selbst.

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

javascript:-Navigation kann durch die Einstellungen der Content Security Policy (CSP) blockiert werden, insbesondere durch script-src.

In diesem Beispiel ist das href-Attribut eines <a>-Elements auf eine javascript:-URL gesetzt, die eine Nachricht beim Klicken 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, weil 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 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 Verlaufseinträge erstellen, sodass es keinen Weg gibt, zur vorherigen Seite zurückzukehren, ohne zu aktualisieren.

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

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

Erwägen Sie stattdessen, auf das submit-Ereignis des Formulars zu hören und es mit JavaScript zu bearbeiten:

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

Überlegen Sie anstelle dessen, das srcdoc-Attribut zu setzen:

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

In diesem Beispiel ist 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!'";

Anstelle dessen könnten Sie die DOM-APIs verwenden, um den Seiteninhalt zu ändern. Zum Beispiel:

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

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