sebastianrothbucher · September 3, 2019 19:07
diff --git a/index.html b/index.html
 <html>
  <body>
    <script>
      function doMagic() {
        event.preventDefault();
        fetch('page2.json').then(res => res.json()).then(res => {
          Object.keys(res).forEach(k => document.getElementById(k).textContent=res[k]);
          history.pushState({}, null, "page2.html");
        });
      }
    </script>
    <h1 id="hOne">Headline index</h1>
    <p id="para">Content index <a href="page2.html" onclick="doMagic()">go to page2</a></p>
  </body>
 </html>
diff --git a/package.json b/package.json
 {
  "name": "pushstate",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "http-server": "0.11.1"
  },
  "scripts": {
    "prestart": "npm install",
    "start": "http-server ."
  }
 }
diff --git a/page2.html b/page2.html
 <html>
  <body>
    <h1 id="hOne">Headline page2</h1>
    <p id="para">Content page2 (via Server)</p>
  </body>
 </html>
diff --git a/page2.json b/page2.json
 {
  "hOne": "Headline page2",
  "para": "Content page2 (via JSON)"
 }
	<html>
	<body>
	<script>
	function doMagic() {
	event.preventDefault();
	fetch('page2.json').then(res => res.json()).then(res => {
	Object.keys(res).forEach(k => document.getElementById(k).textContent=res[k]);
	history.pushState({}, null, "page2.html");
	});
	}
	</script>
	<h1 id="hOne">Headline index</h1>
	<p id="para">Content index <a href="page2.html" onclick="doMagic()">go to page2</a></p>
	</body>
	</html>
	<html>
	<body>
	<h1 id="hOne">Headline page2</h1>
	<p id="para">Content page2 (via Server)</p>
	</body>
	</html>