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

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

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

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

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

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

需要注意的是，如果通过这种方式跳转的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

浏览器先通过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

当我们通过改写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

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

与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）！