URLs JavaScript

Syntaxe

javascript:<script>

javascript:

Le schéma de l'URL.

<script>

Le code JavaScript à exécuter. Le code sera analysé comme un script.

Description

Les URLs javascript: peuvent être utilisées partout où une URL est une cible de navigation. Cela inclut, sans s'y limiter :

• L'attribut href d'un élément HTML <a> ou <area>.
• L'attribut action d'un élément HTML <form>.
• L'attribut src d'un élément HTML <iframe>.
• La propriété JavaScript window.location.
• La barre d'adresse du navigateur elle-même.

Lorsque le navigateur tente de naviguer vers un tel emplacement, il analyse et exécute le corps du script. Le script peut avoir une valeur de complétion (et non une valeur de retour), qui est la même que si le script était exécuté avec eval(). Si la dernière instruction est une expression, la valeur de complétion est la valeur de cette expression. Si cette valeur de complétion est une chaîne de caractères, cette chaîne est traitée comme un document HTML et le navigateur navigue vers un nouveau document avec ce contenu, en utilisant la même URL que la page courante. Aucune entrée d'historique n'est créée. Si la valeur de complétion n'est pas une chaîne, le navigateur exécute simplement le code sans naviguer. Il est donc souvent recommandé, si le script se termine par un appel de fonction comme javascript:foo(), de le préfixer par void pour éviter une navigation accidentelle si la fonction retourne une chaîne.

La navigation javascript: peut être bloquée par les paramètres de politique de sécurité du contenu, en particulier script-src.

Exemples

Utiliser des URLs javascript: comme cibles href

Dans cet exemple, l'attribut href d'un élément <a> est défini sur une URL javascript: qui affiche une alerte lors du clic :

<a href="javascript:alert('Bonjour, le monde !')">Cliquez sur moi</a>

Comme alert() retourne undefined, le navigateur ne navigue pas vers une nouvelle page. C'est une mauvaise pratique car le lien n'est en réalité pas un hyperlien. Il vaut mieux en faire un bouton :

<button id="btn">Cliquez sur moi</button>
<script>
  document.getElementById("btn").addEventListener("click", () => {
    alert("Bonjour, le monde !");
  });
</script>

Dans cet exemple, l'attribut href d'un élément <a> est défini sur une URL javascript: qui navigue vers une nouvelle page avec le contenu « Bonjour, le monde ! » :

<a href="javascript:pageContent">Cliquez sur moi</a>
<script>
  // Utilisez var pour qu'elle devienne une variable globale et puisse être lue ailleurs
  var pageContent = "Bonjour, le monde !";
</script>

Notez que les URLs javascript: ne créent pas d'entrée d'historique, il n'est donc pas possible de revenir à la page précédente sans rafraîchir.

Utiliser des URLs javascript: comme actions de formulaire

Dans cet exemple, l'attribut action d'un élément <form> est défini sur une URL javascript: qui affiche une alerte lors de la soumission :

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

Au lieu de faire cela, il vaut mieux écouter l'évènement submit du formulaire et le gérer en JavaScript :

<form id="myForm">
  <input id="myInput" />
  <input type="submit" value="Envoyer" />
</form>
<script>
  document.getElementById("myForm").addEventListener("submit", (event) => {
    event.preventDefault();
    alert(document.getElementById("myInput").value);
  });
</script>

Utiliser des URLs javascript: comme sources d'un iframe

Dans cet exemple, l'attribut src d'un élément <iframe> est défini sur une URL javascript: qui navigue vers une nouvelle page avec le contenu « Bonjour, le monde ! » :

<iframe src="javascript:pageContent"></iframe>
<script>
  // Utilisez var pour qu'elle devienne une variable globale et puisse être lue ailleurs
  var pageContent = "Bonjour, le monde !";
</script>

Au lieu de faire cela, il vaut mieux utiliser l'attribut srcdoc :

<iframe id="myFrame"></iframe>
<script>
  document.getElementById("myFrame").srcdoc = "Bonjour, le monde !";
</script>

Utiliser des URLs javascript: avec window.location

Dans cet exemple, la propriété window.location est définie sur une URL javascript: qui navigue vers une nouvelle page avec le contenu « Bonjour, le monde ! » :

window.location = "javascript:'Bonjour, le monde !'";

Au lieu de faire cela, il vaut mieux utiliser les APIs DOM pour modifier le contenu de la page. Par exemple :

document.body.textContent = "Bonjour, le monde !";

Spécifications

Voir aussi

• URIs
• Content Security Policy (CSP)
• Liste IANA des schémas URI ^(angl.)