[html5] r4012 - [e] (0) Add an example for pushState(). Fixing http://www.w3.org/Bugs/Public/sho [...]
whatwg at whatwg.org
whatwg at whatwg.org
Mon Sep 28 17:22:05 PDT 2009
Author: ianh
Date: 2009-09-28 17:22:04 -0700 (Mon, 28 Sep 2009)
New Revision: 4012
Modified:
index
source
Log:
[e] (0) Add an example for pushState().
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=7621
Modified: index
===================================================================
--- index 2009-09-28 23:51:09 UTC (rev 4011)
+++ index 2009-09-29 00:22:04 UTC (rev 4012)
@@ -112,7 +112,7 @@
<div class=head>
<p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG src=/images/logo></a></p>
<h1>HTML5</h1>
- <h2 class="no-num no-toc" id=draft-standard-—-28-september-2009>Draft Standard — 28 September 2009</h2>
+ <h2 class="no-num no-toc" id=draft-standard-—-29-september-2009>Draft Standard — 29 September 2009</h2>
<p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -54030,10 +54030,74 @@
</div>
- <!-- XXX add a pushState() example here, for bug 7621 -->
+ <div class=example>
+ <p>Consider a game where the user can navigate along a line, such
+ that the user is always at some coordinate, and such that the user
+ can bookmark the page corresponding to a particular coordinate, to
+ return to it later.</p>
+ <p>A static page implementing the x=5 position in such a game could
+ look like the following:</p>
+ <pre><!DOCTYPE HTML>
+<!-- this is http://example.com/line?x=5 -->
+<title>Line Game - 5</title>
+<p>You are at coordinate 5 on the line.</p>
+<p>
+ <a href="?x=6">Advance to 6</a> or
+ <a href="?x=4">retreat to 4</a>?
+</p></pre>
+
+ <p>The problem with such a system is that each time the user
+ clicks, the whole page has to be reloaded. Here instead is another
+ way of doing it, using script:</p>
+
+ <pre><!DOCTYPE HTML>
+<!-- this starts off as http://example.com/line?x=5 -->
+<title>Line Game - 5</title>
+<p>You are at coordinate <span id="coord">5</span> on the line.</p>
+<p>
+ <a href="?x=6" onclick="go(1)">Advance to 6</a> or
+ <a href="?x=4" onclick="go(-1)">retreat to 4</a>?
+</p>
+<script>
+ var currentPage = 5; // prefilled by server
+ function go(d) {
+ history.pushState(currentPage, 'Line Game - ' + currentPage, '?x=' + currentPage);
+ setupPage(currentPage + d);
+ }
+ onpopstate = function(event) {
+ setupPage(event.state);
+ }
+ function setupPage(page) {
+ currentPage = page;
+ document.title = 'Line Game - ' + currentPage;
+ document.getElementById('coord').textContent = currentPage;
+ document.links[0].href = '?x=' + (currentPage+1);
+ document.links[0].textContent = 'Advance to ' + (currentPage+1);
+ document.links[1].href = '?x=' + (currentPage-1);
+ document.links[1].textContent = 'retreat to ' + (currentPage-1);
+ }
+</script></pre>
+
+ <p>In systems without script, this still works like the previous
+ example. However, users that <em>do</em> have script support can
+ now navigate much faster, since there is no network access for the
+ same experience. Furthermore, contrary to the experience the user
+ would have with just a naïve script-based approach,
+ bookmarking and navigating the session history still work.</p>
+
+ <p>In the example above, the <var title="">data</var> argument to
+ the <code title=dom-history-pushState><a href=#dom-history-pushstate>pushState()</a></code> method
+ is the same information as would be sent to the server, but in a
+ more convenient form, so that the script doesn't have to parse the
+ URL each time the user navigates.</p>
+
+ </div>
+
+
+
<h4 id=activating-state-object-entries><span class=secno>6.10.3 </span><dfn title="activate the state object">Activating state object entries</dfn></h4>
<div class=impl>
Modified: source
===================================================================
--- source 2009-09-28 23:51:09 UTC (rev 4011)
+++ source 2009-09-29 00:22:04 UTC (rev 4012)
@@ -61160,10 +61160,74 @@
</div>
- <!-- XXX add a pushState() example here, for bug 7621 -->
+ <div class="example">
+ <p>Consider a game where the user can navigate along a line, such
+ that the user is always at some coordinate, and such that the user
+ can bookmark the page corresponding to a particular coordinate, to
+ return to it later.</p>
+ <p>A static page implementing the x=5 position in such a game could
+ look like the following:</p>
+ <pre><!DOCTYPE HTML>
+<!-- this is http://example.com/line?x=5 -->
+<title>Line Game - 5</title>
+<p>You are at coordinate 5 on the line.</p>
+<p>
+ <a href="?x=6">Advance to 6</a> or
+ <a href="?x=4">retreat to 4</a>?
+</p></pre>
+
+ <p>The problem with such a system is that each time the user
+ clicks, the whole page has to be reloaded. Here instead is another
+ way of doing it, using script:</p>
+
+ <pre><!DOCTYPE HTML>
+<!-- this starts off as http://example.com/line?x=5 -->
+<title>Line Game - 5</title>
+<p>You are at coordinate <span id="coord">5</span> on the line.</p>
+<p>
+ <a href="?x=6" onclick="go(1)">Advance to 6</a> or
+ <a href="?x=4" onclick="go(-1)">retreat to 4</a>?
+</p>
+<script>
+ var currentPage = 5; // prefilled by server
+ function go(d) {
+ history.pushState(currentPage, 'Line Game - ' + currentPage, '?x=' + currentPage);
+ setupPage(currentPage + d);
+ }
+ onpopstate = function(event) {
+ setupPage(event.state);
+ }
+ function setupPage(page) {
+ currentPage = page;
+ document.title = 'Line Game - ' + currentPage;
+ document.getElementById('coord').textContent = currentPage;
+ document.links[0].href = '?x=' + (currentPage+1);
+ document.links[0].textContent = 'Advance to ' + (currentPage+1);
+ document.links[1].href = '?x=' + (currentPage-1);
+ document.links[1].textContent = 'retreat to ' + (currentPage-1);
+ }
+</script></pre>
+
+ <p>In systems without script, this still works like the previous
+ example. However, users that <em>do</em> have script support can
+ now navigate much faster, since there is no network access for the
+ same experience. Furthermore, contrary to the experience the user
+ would have with just a naïve script-based approach,
+ bookmarking and navigating the session history still work.</p>
+
+ <p>In the example above, the <var title="">data</var> argument to
+ the <code title="dom-history-pushState">pushState()</code> method
+ is the same information as would be sent to the server, but in a
+ more convenient form, so that the script doesn't have to parse the
+ URL each time the user navigates.</p>
+
+ </div>
+
+
+
<h4><dfn title="activate the state object">Activating state object entries</dfn></h4>
<div class="impl">
More information about the Commit-Watchers
mailing list