如何通过在javascript中单击浏览器的后退按钮将页面恢复到之前的状态

Question

I have a page with a link to a form . 我有一个页面，其中包含link form的link 。 After clicking the link the form shows up and the link disappears. 单击link后， link显示该form ， link消失。 The problem that i have is, when i click the browser's back button , the values of the URL is changed, but the state of the page doesn't go back to previous state. 我遇到的问题是，当我单击浏览器的“ back button ，URL的值已更改，但是页面的状态不会返回到先前的状态。 The form should disappear and the link shows back. form应该消失， link显示回来。 Also on reload when the form is visible, the page goes back to its first state, which i need to prevent from happening. 同样在form可见时重新加载时，页面将返回其第一状态，我需要防止这种情况发生。

Code : 代码：

<html>
<style>
  .titimmo {
    text-align: center;
    padding: 10px;
    font-size: 14pt;
    background-color: #CC3300;
    display: block;
  }

  .hidden {
    display: none;
  }

  .visible {
    display: block;
  }

  #formContainer {
    padding: 1em 0 1em 2em;
    background-color: #E8E8E8;
    margin: 1em 0 1em 2em;
    width: 88.9%;
  }

  #formContainer h4 {
    color: #FF3300;
  }
</style>
<body>
<div id="categContainer1">
  <div class="titimmo"><a href="add.php?c=realestate" id="a_categ">Real Estate</a></div>
</div>

<div id="formContainer" class="hidden">
  <form action="add.php" method="post">
    <h4>Location :</h4>
    <input type="text" name="made"/>
    <h4>Price :</h4>
    <input type="text" name="modele"/><br/><br/>
  </form>
</div>
<script>
  function stepone() {
    document.getElementById('a_categ').onclick = function () {
      document.getElementById('categContainer1').className += " hidden";

      document.getElementById('formContainer').className = "visible";
      window.history.pushState('Form', 'My form', this.getAttribute("href"));
      return false

    };
  }

  stepone();
</script>
</body>
</html>

First question is: How to bring back the page to its previous state by clicking the browser's back button? 第一个问题是：如何通过单击浏览器的“后退”按钮将页面恢复到以前的状态？
Second question is: How to prevent the page from going back to its previous state - on reload when it's on second state (when form is visible)? 第二个问题是：如何防止页面回到其先前状态-当页面处于第二状态（可见表单时）时重新加载？

Answer 1

There are two things you need to do to make it work: 要使其正常工作，需要做两件事：

To monitor browser back button click, use window.onpopstate method 要监视浏览器的后退按钮单击，请使用window.onpopstate方法
To remember the form state, you need to store the value in localStorage or in a cookie. 要记住表单状态，您需要将值存储在localStorage或cookie中。

This is a basic example: 这是一个基本示例：

var formVisible = localStorage.formVisible || false;
var cContainer = document.getElementById('categContainer1');
var fContainer = document.getElementById('formContainer');
function formOpen(e) {
    cContainer.className = "hidden";
    fContainer.className = "visible";
    window.history.pushState('Form', 'My form', this.getAttribute("href"));
    localStorage.formVisible = 'Y';
    return false;
};
function formClose(e) {
    cContainer.className = "visible";
    fContainer.className = "hidden";
    localStorage.removeItem( 'formVisible' );
};
if( formVisible ) formOpen();
document.getElementById('a_categ').onclick = formOpen;
window.onpopstate = formClose;

 var formVisible = localStorage.formVisible || false; var cContainer = document.getElementById('categContainer1'); var fContainer = document.getElementById('formContainer'); function formOpen(e) { cContainer.className = "hidden"; fContainer.className = "visible"; window.history.pushState('Form', 'My form', this.getAttribute("href")); localStorage.formVisible = 'Y'; return false; }; function formClose(e) { cContainer.className = "visible"; fContainer.className = "hidden"; localStorage.removeItem( 'formVisible' ); }; if( formVisible ) formOpen(); document.getElementById('a_categ').onclick = formOpen; window.onpopstate = formClose;

 .titimmo { text-align: center; padding: 10px; font-size: 14pt; background-color: #CC3300; display: block; } .hidden { display: none; } .visible { display: block; } #formContainer { padding: 1em 0 1em 2em; background-color: #E8E8E8; margin: 1em 0 1em 2em; width: 88.9%; } #formContainer h4 { color: #FF3300; }

 <div id="categContainer1"> <div class="titimmo"> <a href="add.php?c=realestate" id="a_categ">Real Estate</a> </div> </div> <div id="formContainer" class="hidden"> <form action="add.php" method="post"> <h4>Location :</h4> <input type="text" name="made" /> <h4>Price :</h4> <input type="text" name="modele" /> </form> </div>

Also on Fiddle , where you can actually see how it works . 在Fiddle上， 您实际上可以看到它是如何工作的 。

如何通过在javascript中单击浏览器的后退按钮将页面恢复到之前的状态

问题描述

1 个解决方案

解决方案1
2 2016-03-24 21:55:20

如何通过在javascript中单击浏览器的后退按钮将页面恢复到之前的状态

问题描述

1 个解决方案

解决方案1 2 2016-03-24 21:55:20

解决方案1
2 2016-03-24 21:55:20