Geek Answers Handbook

Want document.open to create a new story item and return to the original page

I use document.open () + write () + close () to create a new page from the client. This works, but it will replace the current history item with a new page, so when the user clicks back, they don’t see the page they were just on. Example:

  • On the home page
  • Click the button to go to the page shown below.
  • Click on the click me button on this page.
  • Click "Back" - this returns the user to the home page, which I do not want.

I tried to insert a history element with history.pushState() , but that will not work either. This allows the document.open page to have a new URL. Clicking back returns the user to the URL of the page I want to display, but this is still a "New Page".

Full HTML below. This type of example does not work in scripts, but can be tested locally.

 <html> <body> <button onclick="clickme()">Click me</button> <script> function clickme() { history.pushState(null, null, "Results/"); document.open("text/html"); document.writeln("New Page"); document.close(); } </script> </body> </html>

Note. Looking for a cross-browser solution, including the latest Chrome 45, which can improve security a bit.

+5
source share
4 answers

I would create the actual webpage for page 3 instead of pushing the events of a fake story.

history.pushState is not supported in older IE (9 and below) and does not work on some androids, this may not be a problem for your project. http://caniuse.com/#search=history.pushState

If you cannot change the back end to redirect to page 3, you can do this in javascript:

  • save your html to localStorage
  • redirect to page 3
  • insert your html when loading page 3.

page 2:

  function clickme() { var html = 'my generated html'; localStorage.savedHtml = html; window.location = 'page3.htm'; }

page 3:

 <html> <head> <!-- I'm assuming you're using jquery --> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body> <div id="restoredHtml"></div> <script> $(function(){ var savedHtml = localStorage.savedHtml || 'No html to restore'; $('#restoredHtml').html(savedHtml); localStorage.removeItem('savedHtml'); }); </script> </body> </html>
+1
source

You can save the string object to pushState and read the value of the object so that you can create a page from this value instead of the browser stream.

So first we add a new element with pushState ()

 var markup = "New page content"; history.pushState( { pageContent : markup } , null, "Results/"); document.open("text/html"); //Write the markup using document object document.writeln(markup); document.close();

How can you attach a listener to the onpopstate event and check if the pageContent state has, and if it has, how to build a document from this:

 window.onpopstate = function(event) { if(event.state.hasOwnProperty("pageContent")){ document.open("text/html"); //Write the markup using document object document.writeln(event.state.pageContent); document.close(); } };
0
source

I found a workaround, but still not quite what I want.

 function clickme() { results = window.open(); results.document.writeln("New Page"); results.document.close(); }

This obviously makes the whole new tab / window to display the results instead of a new page in the history of the current tab. This is almost the same on a cell phone, as it brings you back to the original page, but not to the desktop browser.

0
source

Is there a specific reason why you need to use document.open, document.write and document.close? Wouldn't it be easier to save one page that can maintain state and change the layout?

The following code will let you use the back and forth buttons in Chrome:

 <body> <div id="content-area"> </div> <button onclick="clickme()">Change Page</button> <script> var state = 1; function changeContent(state) { var contentArea = document.getElementById("content-area"); contentArea.innerHTML = "Page " + state; } function clickme() { state = state+1; history.pushState(state, null, "/Page" + state + "/"); changeContent(state); } window.onpopstate = function(event) { if (event.state != null) { state = event.state; } else { state = 1; } changeContent(state); }; changeContent(state); </script> </body>
0
source

More articles:


All Articles