From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/history_api/example/index.md | 244 ++++++++++++++------------ 1 file changed, 128 insertions(+), 116 deletions(-) (limited to 'files/fr/web/api/history_api/example') diff --git a/files/fr/web/api/history_api/example/index.md b/files/fr/web/api/history_api/example/index.md index 82c3fa5b38..9cd519d263 100644 --- a/files/fr/web/api/history_api/example/index.md +++ b/files/fr/web/api/history_api/example/index.md @@ -4,143 +4,147 @@ slug: Web/API/History_API/Example 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 :

+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:

+**page_un.php**: -
<?php
+```php
+
+
+
+
+" . $page_title . "";
+?>
+
 
-<body>
+
 
-<?php include "include/before_content.php"; ?>
+
 
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from first_page.php.

 
-<div id="ajax-content">
-<?php } ?>
+

+
 
-    <p>This is the content of <strong>first_page.php</strong>.</p>
+    
This is the content of first_page.php.

 
-<?php
+ $page_title, "content" => ob_get_clean()));
     } else {
-?>
-</div>
+?>
+

 
-<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from first_page.php.

 
-<?php
+\n";
     }
-?>
-
+?> +``` -

page_deux.php:

+**page_deux.php**: -
<?php
+```php
+
+
+
+
+" . $page_title . "";
+?>
+
 
-<body>
+
 
-<?php include "include/before_content.php"; ?>
+
 
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from second_page.php.

 
-<div id="ajax-content">
-<?php } ?>
+

+
 
-    <p>This is the content of <strong>second_page.php</strong>.</p>
+    
This is the content of second_page.php.

 
-<?php
+ $page_title, "content" => ob_get_clean()));
     } else {
-?>
-</div>
+?>
+

 
-<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from second_page.php.

 
-<?php
+\n";
     }
-?>
-
+?> +``` -

page_trois.php:

+**page_trois.php**: -
<?php
+```php
+Ceci est le contenu de la page_trois.php. Ce contenu est stocké dans une variable PHP.
";
 
-    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
-        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
     } else {
-?>
-<!doctype html>
-<html>
-<head>
-<?php
+?>
+
+
+
+" . $page_title . "";
+?>
+
 
-<body>
+
 
-<?php include "include/before_content.php"; ?>
+
 
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from third_page.php.

 
-<div id="ajax-content">
-<?php echo $page_content; ?>
-</div>
+

+
+

 
-<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
This paragraph is shown only when the navigation starts from third_page.php.

 
-<?php
+\n";
     }
-?>
-
+?> +``` -

css/style.css:

+**css/style.css**: -
#ajax-loader {
+```css
+#ajax-loader {
     position: fixed;
     display: table;
     top: 0;
@@ -149,7 +153,7 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
     height: 100%;
 }
 
-#ajax-loader > div {
+#ajax-loader > div {
     display: table-cell;
     width: 100%;
     height: 100%;
@@ -158,32 +162,42 @@ original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example
     background-color: #000000;
     opacity: 0.65;
 }
-
-

include/after_content.php:

-
<p>Ceci est le pied-de-page. Il est commun à toutes les pages ajax.</p>
-
-

include/before_content.php:

-
<p>
-[ <a class="ajax-nav" href="page_un.php">Premier exemple</a>
-| <a class="ajax-nav" href="page_deux.php">Second exemple</a>
-| <a class="ajax-nav" href="page_trois.php">Troisième exemple</a>
-| <a class="ajax-nav" href="inexistante.php">Page inexistante</a> ]
-</p>
-
-
-

include/header.php:

-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<script type="text/javascript" src="js/ajax_nav.js"></script>
-<link rel="stylesheet" href="css/style.css" />
-
-

js/ajax_nav.js:

- -
"use strict";
+```
+
+**include/after_content.php**:
+
+```php
+
Ceci est le pied-de-page. Il est commun à toutes les pages ajax.

+```
+
+**include/before_content.php**:
+
+```php
+

+[ Premier exemple
+| Second exemple
+| Troisième exemple
+| Page inexistante ]
+

+```
+
+**include/header.php**:
+
+```html
+
+
+
+```
+
+**js/ajax_nav.js**:
+
+```js
+"use strict";
 
 var ajaxRequest = new (function () {
 
     function closeReq () {
-        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
         bIsLoading = false;
     }
 
@@ -243,7 +257,7 @@ var ajaxRequest = new (function () {
     }
 
     function filterURL (sURL, sViewMode) {
-        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
     }
 
     function getPage (sPage) {
@@ -278,7 +292,7 @@ var ajaxRequest = new (function () {
 
     function init () {
         oPageInfo.title = document.title;
-        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
     }
 
     const
@@ -287,7 +301,7 @@ var ajaxRequest = new (function () {
         sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
 
         /* not customizable constants */
-        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
         oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
         oPageInfo = {
             title: null,
@@ -383,15 +397,13 @@ var ajaxRequest = new (function () {
     this.rebuildLinks = init;
 
 })();
-
+``` -
-

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.

-

Lire également

- +> **Note :** [`const`](/en/JavaScript/Reference/Statements/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`](/en/JavaScript/Reference/Statements/const) sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction [`let`](/en/JavaScript/Reference/Statements/let), les constantes déclarées avec [`const`](/en/JavaScript/Reference/Statements/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`](/en/JavaScript/Reference/Statements/const) par des instructions [`var`](/en/JavaScript/Reference/Statements/var).** + +Pour plus d'informations, voyez : [Manipuler l'historique du navigateur](/fr/docs/DOM/manipuler_lhistorique_du_navigateur). + +## Lire également + +- {{ domxref("window.history") }} +- {{ domxref("window.onpopstate") }} -- cgit v1.2.3-54-g00ecf