Comment obtenir l'URL de la page Web à l'aide de JavaScript
Jetons un coup d'œil à cela dans cet article.
Qu'est-ce qu'une URL?
URL (Uniform Resources Locator) est un chemin qui vous permet d'accéder à une instance de page Web particulière. Le navigateur reconnaît le chemin et affiche la page Web requise contre cette URL.
Avant de sauter dans la URL d'une page Web, nous devons avoir une connaissance de base de quelques objets comme:
- objet de fenêtre
- objet de localisation
- objet HREF
Ayons une compréhension de base de chacun de ces objets.
Objet de fenêtre JavaScript
JavaScript utilise le fenêtre.emplacement.href Pour obtenir l'URL de la page. Ici, l'objet Window est un objet universel ou global qui est essentiellement la fenêtre d'un navigateur et cet objet de fenêtre contient tous les objets, fonctions et variables JavaScript.
Objet d'emplacement JavaScript
Emplacement objet contient toutes les informations de l'URL actuelle de la page Web, cet objet est facilement accessible en utilisant le fenêtre. emplacement.
Objet JavaScript HREF
Le href est une propriété qui peut être utilisée pour définir ou renvoyer toute l'URL de la page Web actuelle sur laquelle nous travaillons. cette propriété est accessible sous le fenêtre.emplacement.href
Jetons un coup d'œil à l'ensemble de l'objet et à ses applications.
fenêtre.emplacement.Href a expliqué
En javascript, le Emplacement L'objet contient des informations sur l'URL actuelle du document, tandis que le Fenêtre L'interface est utilisée pour y accéder. En conséquence, vous pouvez récupérer le Emplacement Objet pour le document actuel avec Fenêtre.emplacement. puis utilisez la propriété emplacement.href Pour récupérer une chaîne contenant toute l'URL.
L'URL actuelle indiquée dans la barre d'adresse du navigateur Web peut être récupérée à l'aide d'une variété de techniques JavaScript. Vous pouvez récupérer ces données en utilisant l'attribut d'objet de localisation de l'objet Window. Ce qui suit est une liste de certaines des caractéristiques de l'objet de localisation.
Les opérations que vous pouvez effectuer en utilisant JavaScript sont répertoriées ci-dessous.
Exemples de données URL récupérées à l'aide de la fenêtre.emplacement
Prenons un exemple URL 'https: // exp.com: 3737 / Get?Post = exp # query 'et effectuez des opérations dessus.
| Opération | Résultats |
|---|---|
| fenêtre.emplacement.href | https: // exp.com: 3737 / Get?Post = Exp # Query |
| fenêtre.emplacement.protocole; | https: |
| fenêtre.emplacement.héberger | exemple.com: 3737 |
| fenêtre.emplacement.nom d'hôte | Exp.com |
| fenêtre.emplacement.port | 3737 |
| fenêtre.emplacement.cheminée | obtenir |
| fenêtre.emplacement.mettre en doute | ?Post = Exp |
Implémentation du navigateur
Nous avons discuté ci-dessus de la façon dont nous pouvons facilement utiliser certains des objets JavaScript intégrés pour récupérer l'URL et les informations situées sous l'URL comme le nom d'hôte, le nom de chemin, la requête, etc. Maintenant, nous allons tester pratiquement comment le fenêtre.emplacement.href la propriété fonctionne et comment nous pouvons l'utiliser pour obtenir l'URL de la page Web assez facilement.
JavaScript vous permet d'obtenir l'URL d'une page Web en utilisant son fenêtre.emplacement propriété. Vous pouvez simplement appeler le fenêtre.emplacement.href propriété qui vous renverra l'URL complète de la page Web, y compris le nom d'hôte, le chemin d'accès et la chaîne de requête.
Testons pratiquement la propriété JavaScript.
Ici, dans le code ci-dessus, nous avons créé un bouton, ce bouton a un événement JavaScript qui lui est attaché qui est déclenché chaque fois qu'un bouton est cliqué par l'utilisateur. Dans l'événement JavaScript, nous affichons l'URL de la page Web actuelle dans une alerte en utilisant le fenêtre.emplacement.href, Cette alerte contient le message et l'URL actuelle de la page Web.
Sortie du navigateur:
Lorsque nous cliquons sur le bouton, une alerte apparaît qui affiche l'URL de la page Web actuelle:
Ici, vous pouvez voir que nous avons utilisé fenêtre.emplacement.href à l'intérieur du code pour obtenir l'URL de la page Web et le retourner dans le navigateur en alerte. Donc, chaque fois que vous cliquez sur le bouton "Cliquez sur moi", vous verrez une alerte à l'écran avec le message contenant l'URL de la page Web actuelle.
Récupération des données URL à l'aide de jQuery
Jusqu'à présent, nous avons discuté de la façon dont nous pouvons facilement obtenir l'URL de la page Web en utilisant le JavaScript fenêtre.emplacement.href Propriété, nous pouvons également obtenir les mêmes fonctionnalités avec la jQuery qui est facile à mettre en œuvre et assez fiable également.
Les opérations que vous pouvez effectuer en utilisant jQuery sont répertoriées ci-dessous.
Prenons un exemple URL 'https: // exp.com: 3737 / Get?poster = exp # query 'et effectuer des opérations jQuery dessus.
| Opération | Résultats |
|---|---|
| $ (emplacement).att ('href'); | https: // exp.com: 3737 / Get?Post = Exp # Query |
| $ (emplacement).att ('protocole'); | https: |
| $ (emplacement).att ('hôte'); | exemple.com: 3737 |
| $ (emplacement).att ('hostname'); | Exp.com |
| $ (emplacement).att ('port'); | 3737 |
| $ (emplacement).att ('pathname'); | obtenir |
| $ (emplacement).att ('search'); | ?Post = Exp |
| $ (emplacement).att ('hash'); | #mettre en doute |
| $ (emplacement).att ('Origin'); |
Conclusion:
En javascript, fenêtre.emplacement.href est la propriété que vous pouvez utiliser pour récupérer l'URL de la page Web actuelle. Vous pouvez facilement récupérer l'URL de la page actuelle et effectuer l'opération que vous souhaitez après avoir saisi l'URL. Dans cet article, nous avons vu quelques opérations que nous pouvons effectuer sur l'URL après l'avoir saisie et nous avons également examiné comment nous pouvons implémenter la méthode à l'intérieur de notre code JavaScript pour réaliser la fonctionnalité.