Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[e] (0) Add an example for pushState().
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=7621

git-svn-id: http://svn.whatwg.org/webapps@4012 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
Hixie committed Sep 29, 2009
1 parent 72b80a2 commit ec532b6
Show file tree
Hide file tree
Showing 2 changed files with 131 additions and 3 deletions.
68 changes: 66 additions & 2 deletions index
Expand Up @@ -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-&mdash;-28-september-2009>Draft Standard &mdash; 28 September 2009</h2>
<h2 class="no-num no-toc" id=draft-standard-&mdash;-29-september-2009>Draft Standard &mdash; 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>-->
Expand Down Expand Up @@ -54030,7 +54030,71 @@ NETWORK:

</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>&lt;!DOCTYPE HTML&gt;
&lt;!-- this is http://example.com/line?x=5 --&gt;
&lt;title&gt;Line Game - 5&lt;/title&gt;
&lt;p&gt;You are at coordinate 5 on the line.&lt;/p&gt;
&lt;p&gt;
&lt;a href="?x=6"&gt;Advance to 6&lt;/a&gt; or
&lt;a href="?x=4"&gt;retreat to 4&lt;/a&gt;?
&lt;/p&gt;</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>&lt;!DOCTYPE HTML&gt;
&lt;!-- this starts off as http://example.com/line?x=5 --&gt;
&lt;title&gt;Line Game - 5&lt;/title&gt;
&lt;p&gt;You are at coordinate &lt;span id="coord"&gt;5&lt;/span&gt; on the line.&lt;/p&gt;
&lt;p&gt;
&lt;a href="?x=6" onclick="go(1)"&gt;Advance to 6&lt;/a&gt; or
&lt;a href="?x=4" onclick="go(-1)"&gt;retreat to 4&lt;/a&gt;?
&lt;/p&gt;
&lt;script&gt;
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);
}
&lt;/script&gt;</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&iuml;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>



Expand Down
66 changes: 65 additions & 1 deletion source
Expand Up @@ -61160,7 +61160,71 @@ NETWORK:

</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>&lt;!DOCTYPE HTML>
&lt;!-- this is http://example.com/line?x=5 -->
&lt;title>Line Game - 5&lt;/title>
&lt;p>You are at coordinate 5 on the line.&lt;/p>
&lt;p>
&lt;a href="?x=6">Advance to 6&lt;/a> or
&lt;a href="?x=4">retreat to 4&lt;/a>?
&lt;/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>&lt;!DOCTYPE HTML>
&lt;!-- this starts off as http://example.com/line?x=5 -->
&lt;title>Line Game - 5&lt;/title>
&lt;p>You are at coordinate &lt;span id="coord">5&lt;/span> on the line.&lt;/p>
&lt;p>
&lt;a href="?x=6" onclick="go(1)">Advance to 6&lt;/a> or
&lt;a href="?x=4" onclick="go(-1)">retreat to 4&lt;/a>?
&lt;/p>
&lt;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);
}
&lt;/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&iuml;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>



Expand Down

0 comments on commit ec532b6

Please sign in to comment.