Databases
StackOverflow2013
Postsdbo
POHistory API, refresh and bookmark
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHistory API, refresh and bookmark
    text
    copied!<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code>pushState</code> doesn't make a request, it just changes the url and stores a new history entry. Thinking about this concept, it's impossible to refresh or bookmark because the server will always do a request. A server-side solution is needed.<br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;After several hours searching, I have found a solution, every single call must be redirect to <code>index.php</code> to let PHP handle the request.</p> <pre><code>rewrite ^/(.*)$ /index.php?page=$1 last </code></pre> <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I don't know exactly how this file should be to let a website refresh or bookmark a page. Can somebody help me ? I made an example to help clarify.</p> <hr> <p><strong>index.html</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset = "utf-8"&gt; &lt;title&gt;History API&lt;/title&gt; &lt;script&gt; function ajax (url, callback) { var conection = new XMLHttpRequest (); conection.open ("GET", url, true); conection.setRequestHeader ("X-Requested-With", "XMLHttpRequest"); conection.send (null); conection.onreadystatechange = function () { if (conection.readyState === 4) { if (conection.status === 200) { callback (conection.responseText); } else if (conection.status === 404) { alert ("Page not found !"); } else { alert ("Error !"); } } } } window.addEventListener ("popstate", function (event) { var state = event.state; if (state) { document.getElementById ("content").innerHTML = state["content"]; } }); document.addEventListener ("DOMContentLoaded", function () { var content = document.getElementById ("content"); var menu = document.getElementById ("menu"); menu.addEventListener ("click", function (event) { var target = event.target; if (target.nodeName === "A") { ajax (target.href, function (result) { history.pushState ({"content": result}, target.innerHTML, target.href); content.innerHTML = result; }); event.preventDefault (); } }); }); &lt;/script&gt; &lt;style&gt; body { width: 400px; } div { border: 1px solid black; padding: 10px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id = "menu"&gt; &lt;a href = "page1.html"&gt;Page 1&lt;/a&gt; &lt;a href = "page2.html"&gt;Page 2&lt;/a&gt; &lt;/div&gt; &lt;div id = "content"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>index.php</strong></p> <pre><code>&lt;?php isset ($_GET["page"]) or exit ("Error !"); $page = $_GET["page"]; // Ajax request if (isset ($_SERVER["HTTP_X_REQUESTED_WITH"]) &amp;&amp; strtolower ($_SERVER["HTTP_X_REQUESTED_WITH"]) === "xmlhttprequest") { if (file_exists ($page)) { require_once ($page); } else { header ("HTTP/1.1 404 Not Found"); } } else { require_once ("index.html"); } ?&gt; </code></pre> <p><strong>page1.html</strong></p> <blockquote> <p>Hello, I'm the Page 1. It's nice to meet you.</p> </blockquote> <p><strong>page2.html</strong></p> <blockquote> <p>Hi brother. I'm page 2.</p> </blockquote> <hr> <p><strong>Clicking (ok)</strong></p> <p><img src="https://i.stack.imgur.com/SjLzV.gif" alt="enter image description here"></p> <p><strong>Refresh (fails)</strong></p> <p><img src="https://i.stack.imgur.com/Zoig5.gif" alt="enter image description here"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload