javascript:-URLs

Syntax

javascript:<script>

javascript:

Das Schema der URL.

<script>

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

Beschreibung

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 JavaScript-Eigenschaft window.location.
• Die Adressleiste des Browsers selbst.

Wenn ein Browser versucht, zu einem solchen Ort zu navigieren, parst und führt er den Skriptkörper aus. Das Skript kann einen Abschlusswert haben (keinen Rückgabewert), der dem Wert entspricht, den das Skript bei Ausführung mit eval() hätte. Wenn die letzte Anweisung ein Ausdruck ist, ist der Abschlusswert der Wert dieses Ausdrucks. Wenn dieser Abschlusswert ein String ist, wird dieser String als HTML-Dokument behandelt und der Browser navigiert zu einem neuen Dokument mit diesem Inhalt, wobei dieselbe URL wie für die aktuelle Seite verwendet wird. Es wird kein Verlaufseintrag erstellt. Wenn der Abschlusswert kein String ist, führt der Browser nur den Code aus und navigiert nicht. Daher wird häufig empfohlen, einem Skript, das mit einem Funktionsaufruf wie javascript:foo() endet, void voranzustellen, um eine versehentliche Navigation zu verhindern, falls die Funktion zufällig einen String zurückgibt.

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

Beispiele

Verwendung von javascript:-URLs als href-Ziele

In diesem Beispiel wird das href-Attribut eines <a>-Elements auf eine javascript:-URL gesetzt, die beim Anklicken eine Meldung 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 tatsächlich kein Hyperlink ist. Erwägen Sie stattdessen, ihn zu einem 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 es keine Möglichkeit gibt, zur vorherigen Seite zurückzukehren, ohne die Seite neu zu laden, da javascript:-URLs keine Verlaufseinträge erstellen.

Verwendung von javascript:-URLs als Formularaktionen

In diesem Beispiel wird das action-Attribut eines <form>-Elements auf eine javascript:-URL gesetzt, die beim Absenden eine Meldung 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 warten und es mit JavaScript zu 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>

Verwendung von javascript:-URLs als iframe-Quellen

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>

Erwägen Sie stattdessen, das srcdoc-Attribut zu setzen:

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

Verwendung von javascript:-URLs mit window.location

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!'";

Erwägen Sie stattdessen, DOM-APIs zu verwenden, um den Seiteninhalt zu ändern. Zum Beispiel:

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

Spezifikationen

Siehe auch

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