After replacing page contents with document.write( newHtml )
, refreshing the page still keeps the new contents in Firefox & Edge, but reloads from the URL in Chrome.
Following snippet can be used to reproduce the problem. Run the snipped below and click on the button, it will replace the contents inside the frame. Then right click there and reload the frame, you will see that it brings the button back in Chrome, but not in Firefox or Edge.
document.getElementById( 'replace-button' ).addEventListener( 'click', ev => {
var newHtmlContents = '<!doctype html>\
<html>\
<body>\
Page Contente Replaced!<br/>\
Now try refresing the page!\
</body>\
</html>\
';
document.open();
document.write( newHtmlContents );
document.close();
});
<!doctype html>
<html>
<body>
<button id="replace-button">Replace page contents!</button>
</body>
</html>
Is there a workaround to make the page refreshable after doing that? I am building a single page application and I expect refresing it to reset the page as in Chrome's example.