From 6772831200d14c2436aea2d0c837f40dbf12156f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 26 Sep 2021 13:11:47 +0200 Subject: Prepare Web API section for Markdown conversion (#2464) * Remove summary classes and ids * Remove unecessary hidden * Remove useless span filled with useless attributes / ids * Remove useless font * Remove notranslate * Remove id in other elements than headings * Remove name attributes * Remove 
 for JS w/ language-js class

* Remove 
 for HTML w/ language-html class

* Remove 
 for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI
---
 files/fr/web/api/history_api/example/index.html | 32 ++++++++++++---------
 files/fr/web/api/history_api/index.html         | 38 ++++++++++++++-----------
 2 files changed, 40 insertions(+), 30 deletions(-)

(limited to 'files/fr/web/api/history_api')

diff --git a/files/fr/web/api/history_api/example/index.html b/files/fr/web/api/history_api/example/index.html
index c7c7505a00..2376be43ae 100644
--- a/files/fr/web/api/history_api/example/index.html
+++ b/files/fr/web/api/history_api/example/index.html
@@ -5,9 +5,10 @@ translation_of: Web/API/History_API/Example
 original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
 ---
 
Voici un exemple de site web AJAX composé uniquement de trois pages (page_un.php, page_deux.php et page_trois.php). Pour tester cet exemple, merci de créer les fichiers suivants :

+
 
page_un.php:

-

-  
<?php
+
+
<?php
     $page_title = "Page un";
 
     $as_json = false;
@@ -51,10 +52,10 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
     }
 ?>
 

-

+
 
page_deux.php:

-

-  
<?php
+
+
<?php
     $page_title = "Page deux";
 
     $as_json = false;
@@ -98,10 +99,10 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
     }
 ?>
 

-

+
 
page_trois.php:

-

-  
<?php
+
+
<?php
     $page_title = "Page trois";
     $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>";
 
@@ -136,8 +137,9 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
     }
 ?>
 

-

+
 
css/style.css:

+
 
#ajax-loader {
     position: fixed;
     display: table;
@@ -175,8 +177,8 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
 <link rel="stylesheet" href="css/style.css" />
 

 
js/ajax_nav.js:

-

-  
"use strict";
+
+
"use strict";
 
 var ajaxRequest = new (function () {
 
@@ -382,10 +384,12 @@ var ajaxRequest = new (function () {
 
 })();
 

+
+

+  
Note : const (instruction de constante) ne fait pas partie de ECMAScript 5. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10. const sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction let, les constantes déclarées avec const seront limitées en portée. Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à const par des instructions var.
+  

 

-

-  Note: const (instruction de constante) ne fait pas partie de ECMAScript 5. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10. const sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction let, les constantes déclarées avec const seront limitées en portée. Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à const par des instructions var.

-
Pour plus d'informations, voyez : Manipuler l'historique du navigateur.

+
Pour plus d'informations, voyez : Manipuler l'historique du navigateur.

 
Lire également

 
    
   
  • {{ domxref("window.history") }}
    • 
diff --git a/files/fr/web/api/history_api/index.html b/files/fr/web/api/history_api/index.html
index 67b40d67f2..6fc89eae15 100644
--- a/files/fr/web/api/history_api/index.html
+++ b/files/fr/web/api/history_api/index.html
@@ -49,7 +49,9 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur
 
    var numberOfEntries = window.history.length;
 
    
 
-
    Note: Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode go(); ce comportement est non standard et non supporté par Gecko.
    
+
    
+  
    Note : Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode go(); ce comportement est non standard et non supporté par Gecko.
    
+
    
 
 
    Ajouter et modifier des entrées de l'historique
    
 
@@ -57,21 +59,21 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur
 
 
    HTML5 a introduit les méthodes history.pushState() et history.replaceState(), qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement onpopstate.
    
 
-
    L'utilisation de history.pushState() change le référent créé habituellement dans l'en-tête HTTP pour les objets XMLHttpRequest, chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est this au moment de la création de l'objet XMLHttpRequest.
    
+
    L'utilisation de history.pushState() change le référent créé habituellement dans l'en-tête HTTP pour les objets XMLHttpRequest, chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est this au moment de la création de l'objet XMLHttpRequest.
    
 
-
    Exemple de la méthode pushState()
    
+
    Exemple de la méthode pushState()
    
 
-
    Supposons que http://mozilla.org/foo.html exécute la séquence JavaScript suivante :
    
+
    Supposons que http://mozilla.org/foo.html exécute la séquence JavaScript suivante :
    
 
 
    var stateObj = { foo: "bar" };
 history.pushState(stateObj, "page 2", "bar.html");
 
    
 
-
    Cela va provoquer l'apparition dans la barre de navigation de http://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de bar.html ni même le test d'existence de bar.html.
    
+
    Cela va provoquer l'apparition dans la barre de navigation de http://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de bar.html ni même le test d'existence de bar.html.
    
 
-
    Supposons à présent que l'utilisateur accède à la page http://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http://mozilla.org/bar.html, et si vous lisez l'history.state, vous obtiendrez le stateObj.  L'événement popstate ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à bar.html.
    
+
    Supposons à présent que l'utilisateur accède à la page http://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http://mozilla.org/bar.html, et si vous lisez l'history.state, vous obtiendrez le stateObj.  L'événement popstate ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à bar.html.
    
 
-
    Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en http://mozilla.org/foo.html et le document va recevoir un autre événement popstate, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement popstate.
    
+
    Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en http://mozilla.org/foo.html et le document va recevoir un autre événement popstate, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement popstate.
    
 
 
    La méthode pushState()
    
 
@@ -90,7 +92,9 @@ history.pushState(stateObj, "page 2", "bar.html");
  
 

 
-
Note : Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de "structured clone algorithm" qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.

+

+  
Note : Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet fourni est sérialisé en utilisant JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de "structured clone algorithm" qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.

+

 
 
On peut assimiler l'appel à pushState() à l'affectation window.location = "#foo", en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais pushState() a quelques avantages :

 
@@ -102,7 +106,7 @@ history.pushState(stateObj, "page 2", "bar.html");
 
 
Notez que pushState() n'entraîne jamais le déclenchement d'un événement hashchange, même si la nouvelle URL diffère de l'ancienne seulement par son hash.

 
-
Dans un document XUL elle crée l'élément XUL spécifié.

+
Dans un document XUL elle crée l'élément XUL spécifié.

 
 
Dans d'autres documents, elle crée un élément avec l'URI d'espace de nom null. 

 
@@ -112,18 +116,20 @@ history.pushState(stateObj, "page 2", "bar.html");
 
 
replaceState() est particulièrement utile si vous désirez mettre à jour l'objet état ou l'URL de l'entrée courante de l'historique en réponse à une action de l'utilisateur.

 
-
Note : Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de "structured clone algorithm" qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.

+

+  
Note : Dans Gecko 2.0 {{ geckoRelease("2.0") }} jusqu'à Gecko 5.0 {{ geckoRelease("5.0") }}, l'objet transmis est sérialisé avec JSON. À partir de  Gecko 6.0 {{ geckoRelease("6.0") }}, l'objet est sérialisé à l'aide de "structured clone algorithm" qui autorise, en particulier, la sérialisation d'arbres récursifs cycliques. Cela permet de passer de façon sûre une plus grande diversité d'objets.

+

 
 
Exemple de la méthode replaceState()

 
-
Supposons que http://mozilla.org/foo.html exécute le code JavaScript suivant :

+
Supposons que http://mozilla.org/foo.html exécute le code JavaScript suivant :

 
-
var stateObj = { foo: "bar" };
-history.pushState(stateObj, "page 2", "bar.html");

+
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");

 
 
L'explication des deux lignes ci-dessus peut être trouvée dans la section "Exemple de la méthode pushState()". Supposons ensuite que http://mozilla.org/bar.html exécute le code JavaScript suivant :

 
-
history.replaceState(stateObj, "page 3", "bar2.html");

+
history.replaceState(stateObj, "page 3", "bar2.html");

 
 
Cela entraînera l'affichage de la barre d'URL http://mozilla.org/bar2.html, mais le navigateur ne chargera pas bar2.html ou même vérifiera que bar2.html existe.

 
@@ -137,7 +143,7 @@ history.push
 
 
Lire l'état courant

 
-
Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec  pushState() ou replaceState()) et qu'ensuite l'utilisateur redémarre le navigateur.  Quand votre page sera rechargée, elle recevra l'événement  onload , mais pas l'événement popstate.  Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché.

+
Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec  pushState() ou replaceState()) et qu'ensuite l'utilisateur redémarre le navigateur.  Quand votre page sera rechargée, elle recevra l'événement  onload , mais pas l'événement popstate.  Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché.

 
 
Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement popstate en utilisant la propriété history.state comme ceci :

 
@@ -146,7 +152,7 @@ history.push
 
 
Exemples

 
-
Pour un exemple comple de site web AJAX, vous pouvez voir : Exemple de navigation en Ajax.

+
Pour un exemple comple de site web AJAX, vous pouvez voir : Exemple de navigation en Ajax.

 
 
Spécifications

 
-- 
cgit v1.2.3-54-g00ecf