history3.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>History Demo 3</title>
<link rel="stylesheet" href="css/demo.css">
<style>
body {
  font-family: sans-serif;
  font-size: 83%
}

table {
  border: 1px solid #666;
  background: lightblue;
  margin: 1em auto;
}

td {
  text-align: center;
  padding: 0 0.5em 0.5em 0.5em;
}

.hidden-frame {
  height: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 0;
}
</style>
</head>

<body>

<p>This page demonstrates a goog.History object used in an iframe. Loading JS
code in an iframe is useful for large apps because the JS code can be sent in
bite-sized script blocks that browsers can evaluate incrementally, as they are
received over the wire.</p>

<p>For an introduction to the goog.History object, see <a
href="history1.html">history1.html</a> and <a
href="history2.html">history2.html</a>. This demo uses visible history, like
the first demo.</p>

<p>Try following the hash links below, or updating the location with your own
tokens. Replacing the token will update the page address without appending a
new history entry.</p>

<p>
  Set #fragment<br>
  <a href="#first">first</a><br>
  <a href="#second">second</a><br>
  <a href="#third">third</a>
</p>

<p>
  Set Token<br>
<button onclick="setToken('//\\\\/\\/\\');">//\\/\/\</button>
<button onclick="setToken('{\'a\': \'123\', \'b\': \'456\'}');">
  {'a': '123', 'b': '456'}
</button>
<button onclick="setToken('!@#$%^&*()_+-={}[]\\|;\':&quot;,./<>?');">
  !@#$%^&*()_+-={}[]\|;':&quot;,./&lt;&gt;
</button>
<button onclick="setToken('%2F/foo');">%2F/foo</button>
<button onclick="setToken('%20   02%');">%20&nbsp;&nbsp;&nbsp;02%</button>
</p>

<p>
<input type="text" id="token_input">
<button onclick="setToken()">Set Token</button>
<button onclick="replaceToken()">Replace Current Token</button>
</p>

<table><tr><td>
<h3>The current history state:</h3>
<div id="token_output"></div>
</td></tr></table>

<p>The state should be correctly restored after you
<a href="http://www.google.com/">leave the page</a> and hit the back button.</p>

<fieldset class="goog-debug-panel">
  <legend>Event Log</legend>
  <div id="log"></div>
</fieldset>

<input type="text" id="hist_state" style="display:none">
<iframe name="js" class="hidden-frame" src="history3js.html"></iframe>

<script>
function setToken(opt_val) {
  if (js && js.googHist) {
    var input = document.getElementById('token_input');
    js.googHist.setToken(opt_val || input.value);
  }
  return false;
}

function replaceToken() {
  if (js && js.googHist) {
    var input = document.getElementById('token_input');
    js.googHist.replaceToken(input.value);
  }
  return false;
}
</script>

</body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/history3.html
