| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2010 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('!@#$%^&*()_+-={}[]\\|;\':",./<>?');"> |
| !@#$%^&*()_+-={}[]\|;':",./<> |
| </button> |
| <button onclick="setToken('%2F/foo');">%2F/foo</button> |
| <button onclick="setToken('%20 02%');">%20 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> |
