![](\"https:\/\/planeta21vek.ru\/elina732\/wp-content\/uploads\/2024\/11\/okno081124.jpg\")
<\/p>\npushState() vous permet de modifier le r\u00e9f\u00e9rent utilis\u00e9 dans l’en-t\u00eate HTTP pour les objets XMLHttpRequest cr\u00e9\u00e9s apr\u00e8s le changement d’\u00e9tat. La valeur du r\u00e9f\u00e9rent sera l’URL du document dont se trouve la fen\u00eatre au moment de la cr\u00e9ation de l’objet XMLHttpRequest.<\/p>\n
<\/p>\n
pushState() cr\u00e9e une nouvelle entr\u00e9e dans l’historique du navigateur, vous permettant de revenir aux pages pr\u00e9c\u00e9dentes \u00e0 l’aide du bouton Pr\u00e9c\u00e9dent. Pendant ce temps, l’histoire. replaceState() remplace l’entr\u00e9e actuelle, emp\u00eachant ainsi la possibilit\u00e9 de revenir \u00e0 l’URL pr\u00e9c\u00e9dente via le bouton retour.<\/p>\n
<\/p>\n
Supposons que le code JavaScript suivant soit ex\u00e9cut\u00e9 sur la page http:\/\/x.org\/foo.html:<\/p>\n
\r\njs\r\nCopy to Clipboard\r\nlet stateObj = {\r\n foo: "bar",\r\n};\r\nhistory.pushState(stateObj, "page 2", "bar.html");\r\n<\/pre>\nCela entra\u00eenera l’affichage de http:\/\/x.org\/bar.html dans la barre d’URL, mais le navigateur ne chargera pas la page bar.html ni m\u00eame v\u00e9rifiera si elle existe.<\/p>\n
Supposons maintenant que l’utilisateur acc\u00e8de \u00e0 http:\/\/google.com, puis clique sur le bouton de retour. En cons\u00e9quence, l’URL affichera http:\/\/x.org\/bar.html et history.state contiendra stateObj. L’\u00e9v\u00e9nement popstate ne sera pas d\u00e9clench\u00e9 car la page a \u00e9t\u00e9 recharg\u00e9e. La page elle-m\u00eame ressemblera \u00e0 bar.html.<\/p>\n\n
Si l’utilisateur clique \u00e0 nouveau sur le bouton Pr\u00e9c\u00e9dent, l’URL deviendra http:\/\/x.org\/foo.html et le document d\u00e9clenchera \u00e0 nouveau un \u00e9v\u00e9nement popstate, cette fois avec l’objet d’\u00e9tat d\u00e9fini sur null. Dans ce cas, revenir en arri\u00e8re ne modifie pas non plus le contenu du document, comme \u00e0 l’\u00e9tape pr\u00e9c\u00e9dente, bien que le document lui-m\u00eame puisse mettre \u00e0 jour son contenu apr\u00e8s avoir re\u00e7u l’\u00e9v\u00e9nement popstate.<\/p>\n
La m\u00e9thode pushState() prend trois param\u00e8tres : un objet d’\u00e9tat, un en-t\u00eate (ignor\u00e9 pour l’instant) et un param\u00e8tre \u00ab\u00a0URL\u00a0\u00bb (facultatif).<\/strong><\/p>\nstate object. L’objet state est un objet JavaScript associ\u00e9 \u00e0 la nouvelle entr\u00e9e d’historique cr\u00e9\u00e9e par pushState(). Chaque fois que l’utilisateur acc\u00e8de \u00e0 un nouvel \u00e9tat, l’\u00e9v\u00e9nement popstate se produit et la propri\u00e9t\u00e9 state de l’\u00e9v\u00e9nement contient une copie de l’objet state avec des entr\u00e9es d’historique.<\/p>\n
Un objet d’\u00e9tat peut \u00eatre tout ce qui peut \u00eatre s\u00e9rialis\u00e9. \u00c9tant donn\u00e9 que Firefox stocke les objets d’\u00e9tat sur le disque de l’utilisateur afin qu’ils puissent \u00eatre restaur\u00e9s apr\u00e8s le red\u00e9marrage du navigateur, nous imposons une limite de 640 000 caract\u00e8res \u00e0 la repr\u00e9sentation s\u00e9rialis\u00e9e de l’objet d’\u00e9tat. Si vous transmettez un objet d’\u00e9tat dont la repr\u00e9sentation s\u00e9rialis\u00e9e est sup\u00e9rieure \u00e0 cette valeur, la m\u00e9thode pushState() l\u00e8vera une exception. Si vous avez besoin d’un stockage plus important, vous devriez envisager d’utiliser sessionStorage et\/ou localStorage.<\/p>\n
title. En-t\u00eate – Tous les navigateurs, \u00e0 l’exception de Safari, ignorent ce param\u00e8tre pour le moment, mais pourraient le faire \u00e0 l’avenir. En raison de modifications futures de la m\u00e9thode, une solution s\u00fbre consiste \u00e0 transmettre une cha\u00eene vide. Alternativement, vous pouvez transmettre un court en-t\u00eate pour l’\u00e9tat vers lequel vous passez.<\/p>\n
URL. Ce param\u00e8tre transmet l’URL d’une nouvelle entr\u00e9e dans l’historique. Notez que le navigateur n’essaiera pas de charger l’URL donn\u00e9e imm\u00e9diatement apr\u00e8s avoir appel\u00e9 pushState(), mais pourra essayer de le faire plus tard, par exemple apr\u00e8s que l’utilisateur red\u00e9marre le navigateur. Il n’est pas n\u00e9cessaire que la nouvelle URL soit absolue ; s’il est relatif, il est d\u00e9fini par rapport \u00e0 l’URL actuelle. La nouvelle URL doit pointer vers le m\u00eame domaine, protocole et port, sinon pushState() l\u00e8vera une exception. Ce param\u00e8tre est facultatif; si non sp\u00e9cifi\u00e9, l’URL du document actuel sera utilis\u00e9e.<\/p>\n
L’appel de pushState() est quelque peu similaire \u00e0 la d\u00e9finition de window.location = \u00ab\u00a0#foo\u00a0\u00bb dans le sens o\u00f9 ils cr\u00e9ent et activent \u00e9galement une autre entr\u00e9e d’historique associ\u00e9e au document actuel.<\/p>\n
Mais pushState() pr\u00e9sente plusieurs avantages:<\/p>\n
La nouvelle URL peut appartenir au m\u00eame domaine, au m\u00eame port et au m\u00eame protocole que l’adresse actuelle. Alors que la d\u00e9finition de window.location vous laisse au m\u00eame document uniquement si vous modifiez uniquement le hachage. Il n’est pas n\u00e9cessaire de modifier l’URL. Alors que le param\u00e8tre window.location = \u00ab\u00a0#foo\u00a0\u00bb; cr\u00e9e une nouvelle entr\u00e9e dans l’historique uniquement si le hachage actuel n’est pas #foo<\/p>\n
Toutes les donn\u00e9es peuvent \u00eatre associ\u00e9es \u00e0 une nouvelle entr\u00e9e dans l’historique. Dans l\u2019approche bas\u00e9e sur le hachage, toutes les donn\u00e9es pertinentes doivent \u00eatre cod\u00e9es dans une courte cha\u00eene. Si l’en-t\u00eate du titre est ensuite utilis\u00e9 par les navigateurs, ces donn\u00e9es peuvent \u00eatre utilis\u00e9es (ind\u00e9pendamment du hachage, par exemple). Notez que pushState() ne d\u00e9clenche jamais l’\u00e9v\u00e9nement hashchange, m\u00eame si la nouvelle URL ne diff\u00e8re de l’ancienne qu’en termes de hachage.<\/p>\n
Dans les documents XUL, il cr\u00e9e l’\u00e9l\u00e9ment XUL sp\u00e9cifi\u00e9. Dans d’autres documents, il cr\u00e9e un \u00e9l\u00e9ment avec un URI d’espace de noms nul.<\/p>\n
M\u00e9thode replaceState(). history.replaceState() fonctionne exactement de la m\u00eame mani\u00e8re que history.pushState(), sauf que replaceState() modifie l’entr\u00e9e actuelle de l’historique au lieu de cr\u00e9er une nouvelle entr\u00e9e. A noter que cela n’emp\u00eache pas la cr\u00e9ation d’une nouvelle entr\u00e9e dans l’historique global du navigateur.<\/strong><\/p>\nreplaceState() est particuli\u00e8rement utile lorsque vous souhaitez mettre \u00e0 jour l’objet d’\u00e9tat ou l’URL de l’entr\u00e9e actuelle de l’historique en r\u00e9ponse \u00e0 une action de l’utilisateur.<\/p>\n
Supposons que le code JavaScript suivant soit ex\u00e9cut\u00e9 sur la page http:\/\/x.org\/foo.html:<\/p>\n
\r\nlet stateObj = { foo: "bar" };\r\nhistory.pushState(stateObj, "page 2", "bar.html");\r\n<\/pre>\nUne explication de ces deux lignes peut \u00eatre trouv\u00e9e dans l’exemple de m\u00e9thode pushState() ci-dessus.<\/p>\n
Supposons ensuite que du code JavaScript soit ex\u00e9cut\u00e9 sur la page http:\/\/x.org\/bar.html:<\/p>\n
\r\nhistory.replaceState(stateObj, "page 3", "bar2.html");\r\n<\/pre>\nCela entra\u00eenera l’affichage de http:\/\/x.org\/bar2.html dans la barre d’URL, mais le navigateur ne chargera pas imm\u00e9diatement bar2.html ni m\u00eame v\u00e9rifiera la pr\u00e9sence de cette page bar2.html.<\/p>\n
Supposons maintenant que l’utilisateur acc\u00e8de \u00e0 http:\/\/www.microsoft.com, puis clique sur le bouton Pr\u00e9c\u00e9dent. Dans ce cas, http:\/\/x.org\/bar2.html sera affich\u00e9 dans la barre d’URL. Si l’utilisateur clique \u00e0 nouveau sur le bouton \u00ab\u00a0Retour\u00a0\u00bb, la barre d’URL affichera http:\/\/x.org\/foo.html et contournera compl\u00e8tement bar.html.<\/p>\n
Ev\u00e9nement popstate. L’\u00e9v\u00e9nement popstate est d\u00e9clench\u00e9 sur la fen\u00eatre chaque fois que l’entr\u00e9e d’historique active change. Si l’entr\u00e9e d’historique en cours d’activation a \u00e9t\u00e9 cr\u00e9\u00e9e par un appel \u00e0 pushState ou activ\u00e9e par un appel \u00e0 replaceState, la propri\u00e9t\u00e9 state de l’\u00e9v\u00e9nement popstate contient une copie de l’entr\u00e9e d’historique de l’objet \u00e9v\u00e9nement.<\/strong><\/p>\nLorsqu’une page se charge, elle peut avoir un objet \u00e9v\u00e9nement avec une valeur autre que \u00ab\u00a0null\u00a0\u00bb. Cela peut se produire, par exemple, si la page d\u00e9finit un objet d’\u00e9tat (en utilisant pushState() ou replaceState()) et que l’utilisateur red\u00e9marre ensuite le navigateur. Lorsque la page est recharg\u00e9e, elle recevra l’\u00e9v\u00e9nement onload, mais ne recevra pas l’\u00e9v\u00e9nement popstate. Cependant, si vous lisez la propri\u00e9t\u00e9 history.state, vous obtiendrez l’objet d’\u00e9tat que vous auriez obtenu si l’\u00e9v\u00e9nement popstate s’\u00e9tait produit.<\/p>\n
\u00c0 l’aide de la propri\u00e9t\u00e9 history.state, vous pouvez lire l’\u00e9tat de l’entr\u00e9e actuelle de l’historique sans attendre l’\u00e9v\u00e9nement popstate, par exemple:<\/p>\n
\r\nlet currentState = history.state;\r\n<\/pre>\n\n","protected":false},"excerpt":{"rendered":"pushState() vous permet de modifier le r\u00e9f\u00e9rent utilis\u00e9 dans l’en-t\u00eate HTTP pour les objets XMLHttpRequest cr\u00e9\u00e9s apr\u00e8s le changement d’\u00e9tat. La valeur du r\u00e9f\u00e9rent sera l’URL du document dont se trouve la fen\u00eatre au moment de la cr\u00e9ation de l’objet XMLHttpRequest.<\/p>\n","protected":false},"author":1,"featured_media":234,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[111,8,7],"tags":[115,112,113,114],"class_list":{"0":"post-233","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-htmlverstka","9":"category-programmirovanie","10":"tag-onpopstate","11":"tag-pushstate","12":"tag-replacestate","13":"tag-url"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":2,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"predecessor-version":[{"id":269,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts\/233\/revisions\/269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/media\/234"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}