Maison > interface Web > js tutoriel > le corps du texte

Une analyse approfondie de l'objet window.location pour implémenter des sauts de page

WBOY
Libérer: 2022-08-05 10:57:58
avant
3118 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement les problèmes liés à l'objet window.location pour réaliser un saut de page. L'objet window.location est utilisé pour obtenir l'adresse de la page actuelle et réinitialiser le navigateur. vers une nouvelle page, jetons-y un coup d'œil, j'espère qu'elle sera utile à tout le monde.

Une analyse approfondie de l'objet window.location pour implémenter des sauts de page

【Recommandations associées : tutoriel vidéo javascript, front-end web

L'objet window.location est utilisé pour obtenir l'adresse (URL) de la page actuelle et rediriger le navigateur vers une nouvelle page.

emplacement de la fenêtre L'objet n'a pas besoin d'utiliser le préfixe Window lors de l'écriture. Quelques exemples :

  • location.hostname renvoie le nom de domaine de l'hébergeur Web
  • location.pathname renvoie le chemin et le nom de fichier de la page actuelle
  • location.port renvoie le port de l'hébergeur Web
  • location.protocol renvoie le protocole Web utilisé

window location href

Exemple

Renvoyer l'URL de la page actuelle :

<script type="text/javascript">
	    document.write(location.href);
</script>
Copier après la connexion

La sortie du code ci-dessus est :

http://127.0.0.1:8848/7.11/new_file.html
Copier après la connexion

window location pathname

Le emplacement La propriété .pathname renvoie le nom du chemin de l'URL.

Exemple

Renvoyer le nom du chemin de l'URL actuelle :

<script type="text/javascript">
		document.write(location.pathname);
</script>
Copier après la connexion

La sortie du code ci-dessus est :

/7.11/new_file.html
Copier après la connexion

window location Assign

La méthode location.assign() charge un nouveau document.

Exemple

Charger un nouveau document :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" name="" id="" value="跳转到百度" onclick="newDoc()"/>
		<script type="text/javascript">
			function newDoc(){
				window.location.assign('https://www.baidu.com')
			}
		</script>
	</body>
</html>
Copier après la connexion

Utilisez javascript pour implémenter un saut de page programmé --- objet de localisation

Obligatoire pour obtenir les effets suivants :

Idée d'implémentation de code :

  • Écrivez une page HTML qui saute régulièrement.

  • Obtenez le nombre de secondes spécifié et soustrayez 1 pour écrire sur la page.

  • Lorsque les secondes sont supérieures à 0, utilisez setTimeout() pour boucler le compte à rebours.

  • Lorsque le nombre de secondes est inférieur ou égal à 0, utilisez location.href pour accéder à l'adresse URL spécifiée.

Le code d'implémentation est le suivant :

code html :

code css :

code js :

Effet obtenu :

【 Recommandations associées : tutoriel vidéo javascript, front-end web

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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal