diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
| commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
| tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/history_api/example | |
| parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
| download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/api/history_api/example')
| -rw-r--r-- | files/fr/web/api/history_api/example/index.md | 244 |
1 files changed, 128 insertions, 116 deletions
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 --- -<p>Voici un exemple de site web AJAX composé uniquement de trois pages (<em>page_un.php</em>, <em>page_deux.php</em> et <em>page_trois.php</em>). Pour tester cet exemple, merci de créer les fichiers suivants :</p> +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 : -<p><strong>page_un.php</strong>:</p> +**page_un.php**: -<pre class="brush: php"><?php +```php +<?php $page_title = "Page un"; $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { + if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { $as_json = true; ob_start(); } else { -?> -<!doctype html> -<html> -<head> -<?php +?> +<!doctype html> +<html> +<head> +<?php include "include/header.php"; - echo "<title>" . $page_title . "</title>"; -?> -</head> + echo "<title>" . $page_title . "</title>"; +?> +</head> -<body> +<body> -<?php include "include/before_content.php"; ?> +<?php include "include/before_content.php"; ?> -<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> +<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> -<div id="ajax-content"> -<?php } ?> +<div id="ajax-content"> +<?php } ?> - <p>This is the content of <strong>first_page.php</strong>.</p> + <p>This is the content of <strong>first_page.php</strong>.</p> -<?php +<?php if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { -?> -</div> +?> +</div> -<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> +<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> -<?php +<?php include "include/after_content.php"; - echo "</body>\n</html>"; + echo "</body>\n</html>"; } -?> -</pre> +?> +``` -<p><strong>page_deux.php</strong>:</p> +**page_deux.php**: -<pre class="brush: php"><?php +```php +<?php $page_title = "Page deux"; $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { + if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { $as_json = true; ob_start(); } else { -?> -<!doctype html> -<html> -<head> -<?php +?> +<!doctype html> +<html> +<head> +<?php include "include/header.php"; - echo "<title>" . $page_title . "</title>"; -?> -</head> + echo "<title>" . $page_title . "</title>"; +?> +</head> -<body> +<body> -<?php include "include/before_content.php"; ?> +<?php include "include/before_content.php"; ?> -<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> +<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> -<div id="ajax-content"> -<?php } ?> +<div id="ajax-content"> +<?php } ?> - <p>This is the content of <strong>second_page.php</strong>.</p> + <p>This is the content of <strong>second_page.php</strong>.</p> -<?php +<?php if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { -?> -</div> +?> +</div> -<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> +<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> -<?php +<?php include "include/after_content.php"; - echo "</body>\n</html>"; + echo "</body>\n</html>"; } -?> -</pre> +?> +``` -<p><strong>page_trois.php</strong>:</p> +**page_trois.php**: -<pre class="brush: php"><?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>"; + $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>"; - 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 +?> +<!doctype html> +<html> +<head> +<?php include "include/header.php"; - echo "<title>" . $page_title . "</title>"; -?> -</head> + echo "<title>" . $page_title . "</title>"; +?> +</head> -<body> +<body> -<?php include "include/before_content.php"; ?> +<?php include "include/before_content.php"; ?> -<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> +<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> -<div id="ajax-content"> -<?php echo $page_content; ?> -</div> +<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> +<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> -<?php +<?php include "include/after_content.php"; - echo "</body>\n</html>"; + echo "</body>\n</html>"; } -?> -</pre> +?> +``` -<p><strong>css/style.css</strong>:</p> +**css/style.css**: -<pre class="brush: 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; } -</pre> -<p><strong>include/after_content.php</strong>:</p> -<pre class="brush: php"><p>Ceci est le pied-de-page. Il est commun à toutes les pages ajax.</p> -</pre> -<p><strong>include/before_content.php</strong>:</p> -<pre class="brush: 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> - -</pre> -<p><strong>include/header.php</strong>:</p> -<pre class="brush: html"><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" /> -</pre> -<p><strong>js/ajax_nav.js</strong>:</p> - -<pre class="brush: js">"use strict"; +``` + +**include/after_content.php**: + +```php +<p>Ceci est le pied-de-page. Il est commun à toutes les pages ajax.</p> +``` + +**include/before_content.php**: + +```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**: + +```html +<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**: + +```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; })(); -</pre> +``` -<div class="note"> - <p><strong>Note :</strong> <a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> (instruction de constante) <strong>ne fait pas partie de ECMAScript 5</strong>. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. <strong>Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction <a href="/en/JavaScript/Reference/Statements/let"><code>let</code></a>, les constantes déclarées avec <a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> seront limitées en portée. <strong>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 à </strong><strong><a href="/en/JavaScript/Reference/Statements/const"><code>const</code></a> par des instructions <a href="/en/JavaScript/Reference/Statements/var"><code>var</code></a>.</strong> - </p> -</div> -<p>Pour plus d'informations, voyez : <a href="/fr/docs/DOM/manipuler_lhistorique_du_navigateur">Manipuler l'historique du navigateur</a>.</p> -<h2 id="Lire_également">Lire également</h2> -<ul> - <li>{{ domxref("window.history") }}</li> - <li>{{ domxref("window.onpopstate") }}</li> -</ul> +> **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") }} |