Table des matières
Explication détaillée de la façon dont JavaScript exploite les URL (couramment utilisées dans les applications à page unique)
1.document.location
2.location.replace
3.window.onhashchange
4. history.pushState
5.history.replaceState
6.window.onpopstate
Maison interface Web js tutoriel Explication détaillée de la façon dont JavaScript exploite les URL (couramment utilisées dans les applications monopage)

Explication détaillée de la façon dont JavaScript exploite les URL (couramment utilisées dans les applications monopage)

Feb 27, 2017 pm 02:33 PM

Explication détaillée de la façon dont JavaScript exploite les URL (couramment utilisées dans les applications à page unique)

JavaScript dispose de nombreuses méthodes qui peuvent exploiter l'historique du navigateur, qu'il s'agisse un saut de page ordinaire Nous traiterons souvent de ces méthodes, qu'il s'agisse de redirection ou de changements de valeur de hachage dans les applications à page unique. Surtout dans les applications à page unique, ces méthodes sont presque les méthodes de base du routage de page. Cet article traite de ces méthodes en détail.

1.document.location

location est l'un des objets de nomenclature les plus utiles. Il fournit des informations sur le document chargé dans la fenêtre actuelle et fournit également certaines fonctions de navigation. En fait, l’objet location est à la fois une propriété de l’objet window et une propriété de l’objet document. En d’autres termes, window.location et document.location sont le même objet. Il est recommandé d'utiliser document.location pour vous adapter aux environnements de documents sans navigateur.
À l'exception de l'attribut href défini pour la balise a, la méthode de saut la plus couramment utilisée doit être : window.location.href="xxx"; En fait, le code ci-dessus exécute en fait la méthode location.assign. Bref, les méthodes d'écriture des trois sauts d'URL suivants sont exactement les mêmes. Ils ouvriront immédiatement une nouvelle URL et généreront un enregistrement dans l'historique du navigateur :

document.location.assign("xxx");document.location="xxx";document.location.href="xxx";
Copier après la connexion
Copier après la connexion

Il est à noter que si l'URL est utilisée. sauté de cette manière est exactement le même que l'URL actuelle, et la page sera actualisée, mais l'historique du navigateur ne sera pas ajouté.

2.location.replace

La fonction est presque identique à location.href=”xxx”;, avec une seule différence, location.replace générera un enregistrement dans l'historique du navigateur et remplacera l'enregistrement précédent. Par exemple, lorsque nous ouvrons la page "a.html", il y a les deux lignes de code suivantes dans la page :

document.location.href="c.html";document.location.replace("b.html");
Copier après la connexion
Copier après la connexion

Le navigateur passe d'abord à c.html via location.href, puis utilise location.replaceAller à b.html. À ce stade, cliquez sur le bouton Précédent du navigateur, et le navigateur reviendra directement à a.html, car l'historique de c.html a été écrasé par le remplacement.

3.window.onhashchange

Nous pouvons surveiller le changement de valeur de hachage de l'URL du navigateur via la forme de code suivante :

window.addEventListener("hashchange",function(){
    //do something
},false);//以下代码都会触发hashchange事件
document.location.hash="#a=1";document.location.href="b.html#b=1";document.location.replace("c.html#c=1");
Copier après la connexion
Copier après la connexion

Lorsque nous réécrivons l'emplacement Le hashchange L'événement est déclenché lorsque la valeur de hachage de l'URL du navigateur change. Si la réécriture d'URL provoque une actualisation de la page (par exemple, la modification des paramètres de requête d'URL ou le passage direct à une adresse inter-domaines), l'événement hashchange sera directement ignoré. Veuillez noter que les modifications de la valeur de hachage de l'URL ne déclenchent pas toujours l'événement hashchange. La méthode présentée ci-dessous consiste à modifier l'URL mais pas à déclencher le hashchange.

4. history.pushState

La méthode pushState reçoit trois paramètres : un objet qui enregistre l'état historique (cet objet sera transmis lorsque l'événement popstate est déclenché, et a une limite de taille de 640 Ko) ; Une chaîne représentant le titre de l'historique ; une adresse avec la même origine que l'URL actuelle. L'utilisation typique est la suivante : La méthode

history.pushState({}, "", "b.html");
Copier après la connexion
Copier après la connexion

history.pushState() définira l'URL sur une valeur d'URL de même origine. Après cela, l'en-tête Referrer de la requête Ajax envoyée utilisera cette nouvelle valeur At. en même temps, un nouvel enregistrement d'historique est généré dans l'historique du navigateur. Cependant, la méthode pushState n'actualisera pas la page et la modification de la valeur de hachage de l'URL provoquée par pushState ne déclenchera pas l'événement hashchange. Si pushState définit une adresse exactement identique à l'URL actuelle, un nouvel enregistrement sera quand même ajouté à l'historique du navigateur.

5.history.replaceState

Cette méthode est fondamentalement la même que history.pushState La seule différence est que replaceState écrasera l'enregistrement historique précédent comme location.replace.
Plus d'introduction sur history.pushState et history.replaceState :
http://www.php.cn/

6.window.onpopstate

Nous pouvons transmettre le code suivant formulaire pour écouter l'événement popstate du navigateur :

window.addEventListener("popstate",function(event){
    //do something},false);
Copier après la connexion
Copier après la connexion

Semblable à l'événement hashchange, popstate sera déclenché lorsqu'une URL change (hashchange ne sera déclenché que lorsque la valeur de hachage change), et history.pushState et history.replaceState ne déclenchera pas non plus l'événement popstate. L'événement popstate ne sera déclenché que lorsque le navigateur reculera, avancera ou réécrira la valeur de hachage. Si la réécriture d'URL provoque une actualisation de la page (comme la modification des paramètres de requête d'URL ou le passage direct à une adresse inter-domaines), l'événement popstate sera directement ignoré.
Veuillez noter ici le paramètre "event" passé à la fonction event dans le code. Le paramètre event contient l'objet state. Cet objet state est le premier paramètre state transmis lors de l'appel des méthodes history.pushState et history.replaceState. Nous pouvons effectuer certains traitements sur les documents historiques grâce à cette méthode de transfert d'état.

Explication détaillée de la façon dont JavaScript exploite les URL (couramment utilisées dans les applications à page unique)

JavaScript dispose de nombreuses méthodes qui peuvent exploiter l'historique du navigateur, qu'il s'agisse de sauts de page ordinaires ou de hachage d'application d'une seule page. valeurs Nous traitons tous fréquemment de ces méthodes, en particulier dans les applications monopage. Ces méthodes sont presque les méthodes de base du routage des pages. Cet article traite de ces méthodes en détail.

1.document.location

location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上,location对象既是window对象的属性,又是document对象的属性。换句话说,window.location和document.location是同一个对象。这里推荐大家使用document.location的写法,以适应非浏览器文档环境。
除去为a标签设置的href属性,大家最常用的跳转方式一定就是:window.location.href=”xxx”;实际上,上面这句代码真正执行的是location.assign方法。简而言之,下面三中URL跳转的写法完全等同,都会立即打开新的URL并在浏览器的历史记录中生成一条记录:

document.location.assign("xxx");document.location="xxx";document.location.href="xxx";
Copier après la connexion
Copier après la connexion

需要注意的是,如果通过这种方式跳转的URL与当前URL完全相同,则页面会刷新,但是浏览器历史记录不会新增。

2.location.replace

功能几乎与location.href=”xxx”;完全相同,只有一个区别,location.replace会在浏览器的历史记录中生成一条记录,并替换前一条记录。举个例子,当我们打开“a.html”页面,页面内有如下两行代码:

document.location.href="c.html";document.location.replace("b.html");
Copier après la connexion
Copier après la connexion

浏览器先通过location.href的方式跳转到c.html,接着又使用location.replace跳转到b.html。此时点击浏览器的后退按钮,浏览器会直接返回a.html,因为c.html这条历史记录被replace覆盖了。

3.window.onhashchange

我们可以通过如下代码形式来监听浏览器URL的哈希值变化:

window.addEventListener("hashchange",function(){
    //do something
},false);//以下代码都会触发hashchange事件
document.location.hash="#a=1";document.location.href="b.html#b=1";document.location.replace("c.html#c=1");
Copier après la connexion
Copier après la connexion

当我们通过改写location的方式引起浏览器URL哈希值变化时,hashchange事件就会触发。如果URL重写导致了页面刷新(例如改变了URL查询参数,或者直接跳向一个跨域地址),hashchange事件会直接被跳过。请注意,URL哈希值变化不一定总是会触发hashchange事件,下面要介绍的方法就是改动URL但不触发hashchange。

4. history.pushState

pushState方法接收三个参数:一个记录历史状态的对象(该对象会在popstate事件触发时被传入,有640K的大小限制);一个代表历史记录标题的字符串;一个与当前URL同源的地址。典型的使用方式如下:

history.pushState({}, "", "b.html");
Copier après la connexion
Copier après la connexion

history.pushState()方法会将URL设置为一个同源URL值,在此之后发送的Ajax请求的Referrer头部都会使用这个新的值,同时在浏览器历史记录中生成一条新的历史记录。但是pushState方法不会刷新页面,pushState引起的URL哈希值变化也不会触发hashchange事件。pushState如果设置了一条与当前URL完全相同的地址,浏览器的历史记录中仍然会新增一条记录。

5.history.replaceState

该方法与history.pushState基本相同,唯一的区别就是replaceState会像location.replace一样覆盖先前历史记录。
关于history.pushState和history.replaceState的更多介绍:
http://www.php.cn/

6.window.onpopstate

我们可以通过如下代码形式来监听浏览器的popstate事件:

window.addEventListener("popstate",function(event){
    //do something},false);
Copier après la connexion
Copier après la connexion

与hashchange事件类似,popstate会在任何URL变化时触发(hashchange只会在哈希值变化时触发),并且history.pushState和history.replaceState也不会触发popstate事件。只有在浏览器后退、前进、重写哈希值的情况下才会触发popstate事件。如果URL重写导致了页面刷新(例如改变了URL查询参数,或者直接跳向一个跨域地址),popstate事件会直接被跳过。
这里请注意一下代码中传给事件函数的参数“event”,event参数中包含state对象,这个state对象就是在调用history.pushState和history.replaceState方法是传入的第一个状态参数,我们可以通过这种状态传递方式来对历史记录进行一定处理。

 以上就是详解JavaScript操作URL的方法(单页应用常用)的内容,更多相关内容请关注PHP中文网(www.php.cn)!


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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

Pourquoi NameResolutionError(self.host, self, e) de e et comment le résoudre Pourquoi NameResolutionError(self.host, self, e) de e et comment le résoudre Mar 01, 2024 pm 01:20 PM

La raison de l'erreur est NameResolutionError(self.host,self,e)frome, qui est un type d'exception dans la bibliothèque urllib3. La raison de cette erreur est que la résolution DNS a échoué, c'est-à-dire le nom d'hôte ou l'adresse IP qui était. La tentative de résolution n'a pas pu être trouvée. Cela peut être dû au fait que l'adresse URL saisie est incorrecte ou que le serveur DNS est temporairement indisponible. Comment résoudre cette erreur Il peut y avoir plusieurs façons de résoudre cette erreur : Vérifiez si l'adresse URL saisie est correcte et assurez-vous qu'elle est accessible Assurez-vous que le serveur DNS est disponible, vous pouvez essayer d'utiliser la commande "ping" dans la ligne de commande pour tester si le serveur DNS est disponible Essayez d'accéder au site Web en utilisant l'adresse IP au lieu du nom d'hôte si vous êtes derrière un proxy

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

Quelle est la différence entre HTML et URL Quelle est la différence entre HTML et URL Mar 06, 2024 pm 03:06 PM

Différences : 1. Différentes définitions, l'URL est un localisateur de ressources uniforme et le HTML est un langage de balisage hypertexte ; 2. Il peut y avoir plusieurs URL dans un HTML, mais une seule page HTML peut exister dans une URL. 3. HTML fait référence à ; une page Web, et l'url fait référence à l'adresse du site Web.

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

See all articles