L'objet Location de JavaScript permet d'accéder au composant URL actuel. On peut considérer cet objet comme une fenêtre en lecture seule à l'emplacement actuel.
L'objet Location possède deux propriétés qui sont souvent confondues avec : l'hôte et le nom d'hôte.
L'attribut host renvoie le nom d'hôte, le numéro de port et le protocole de l'URL actuelle. Par exemple, si l'URL actuelle est « http://exemple.com:8080/path/to/page.html », la valeur de l'hôte est « exemple.com:8080 ».
Il y a également certains avantages à utiliser location.host plutôt que location.hostname.
Tout d’abord, c’est plus précis. Si vous avez besoin d'un numéro de port ou d'un protocole, vous pouvez être sûr que la propriété hôte le renverra.
Deuxièmement, plus concis. Si vous n'avez besoin que du nom d'hôte, vous pouvez utiliser l'attribut de nom d'hôte le plus court. Mais si vous avez également besoin du numéro de port ou du protocole, vous pouvez utiliser les propriétés de l'hôte et obtenir toutes les informations en même temps.
Troisièmement, il est plus orienté vers l’avenir. Si un nouveau composant URL est ajouté, il peut être inclus dans la propriété hôte. Ce n'est pas nécessairement le cas avec l'attribut hostname.
D'un autre côté, l'attribut hostname renvoie uniquement la partie nom d'hôte de l'URL actuelle. Par exemple, si l'URL actuelle est « http://example.com:8080/path/to/page.html », la valeur du nom d'hôte est « example.com ».
L'utilisation de location.hostname présente certains avantages par rapport à location.host.
Tout d’abord, c’est plus lisible. Lorsque vous consultez une URL, vous êtes généralement plus intéressé par le nom d'hôte que par le numéro de port ou le protocole.
Deuxièmement, plus cohérent. Le nom d'hôte est une partie obligatoire de l'URL, tandis que le numéro de port et le protocole sont facultatifs. Cela signifie que toutes les URL n'ont pas d'attribut d'hôte, mais qu'elles ont toutes un nom d'hôte.
Troisièmement, il est plus élastique. Si vous modifiez le numéro de port ou le protocole de l'URL, le nom d'hôte sera toujours le même. Ce n'est pas le cas des propriétés d'hôte.
En général, sauf si vous avez spécifiquement besoin d'un numéro de port ou d'un protocole, vous devez utiliser location.hostname.
La raison en est que le nom d'hôte est la partie « lisible par l'homme » de l'URL, alors que l'attribut host inclut également le numéro de port et le protocole. La plupart du temps, ces informations supplémentaires ne sont pas nécessaires.
Il existe cependant quelques exceptions. Un exemple est si vous devez créer une nouvelle URL en utilisant l’URL actuelle comme base. Dans ce cas, vous devez utiliser location.host pour conserver le numéro de port et le protocole.
Une autre exception est si vous utilisez un raccourcisseur d'URL. Dans ce cas, vous devez utiliser location.host pour conserver le nom d'hôte de l'URL d'origine.
Différence entreLe tableau suivant met en évidence les principales différences entre location.host et location.hostname en JavaScript -
| Relativement basique | Emplacement.Hôte | emplacement.nom d'hôte |
|---|---|---|
| Définition | L'attribut host renvoie le nom d'hôte, le numéro de port et le protocole de l'URL actuelle | D'un autre côté, l'attribut hostname ne renvoie que la partie nom d'hôte de l'URL actuelle |
| Exemple | Si l'URL actuelle est "http://example.com:8080/path/to /page.html", la valeur de l'hôte est "example.com:8080 | Si l'URL actuelle est "http://example.com:8080/path /to/page.html", la valeur du nom d'hôte est "example.com". |
| Quand utiliser ? | Si vous avez spécifiquement besoin d'un numéro de port ou d'un protocole, vous devez utiliser location.host. | Sauf si vous avez spécifiquement besoin d'un numéro de port ou d'un protocole, vous devez utiliser location.hostname. |
| Lisibilité | Les propriétés de l'hôte incluent également le numéro de port et le protocole, ce qui les rend moins lisibles. | Le nom d'hôte est la partie « lisible par l'homme » de l'URL. |
Dans la plupart des cas, vous devez utiliser location.hostname au lieu de location.host. C’est plus lisible, plus cohérent et plus résilient. Cependant, il existe quelques exceptions, par exemple lorsque vous devez créer une nouvelle URL ou utiliser un raccourcisseur d'URL.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
