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. Dazu gehören, aber sind nicht beschränkt auf:

• 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, parst und führt er den Skriptkörper aus. Das Skript kann einen Abschlusswert haben (keinen Rückgabewert), der derselbe Wert ist, wenn das Skript mit eval() ausgeführt würde. 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 betrachtet, und der Browser navigiert zu einem neuen Dokument mit diesem Inhalt unter Verwendung derselben URL wie die aktuelle Seite. Es wird kein Verlaufseintrag erstellt. Wenn der Abschlusswert 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 versehen, um eine unbeabsichtigte Navigation zu verhindern, falls die Funktion zufällig einen String zurückgibt.

javascript: Navigation kann durch Content-Security-Policy Einstellungen blockiert werden, insbesondere durch 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 tatsächlich kein Hyperlink ist. Ziehen Sie in Betracht, stattdessen einen Button zu erstellen:

<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, so dass es keinen Weg gibt, zur vorherigen Seite zurückzukehren, ohne die Seite neu zu laden.

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

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

Anstatt dies zu tun, sollten Sie in Betracht ziehen, das submit Ereignis des Formulars zu verfolgen 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>

Anstatt dies zu tun, sollten Sie in Betracht ziehen, das srcdoc-Attribut festzulegen:

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

Anstatt dies zu tun, sollten Sie in Betracht ziehen, 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