Question

我有一个link到form的网页。点击link form显示后，link消失。我遇到的问题是，当我点击浏览器的back button时，URL的值会发生变化，但页面的状态不会恢复到以前的状态。 form应该消失，link显示回来。同样在form可见时重新加载，页面将返回其第一个状态，我需要阻止其发生。

代码：

<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>

第一个问题是：如何通过单击浏览器的后退按钮将页面恢复到以前的状态？
第二个问题是：如何阻止页面返回到先前的状态 - 当它处于第二状态时重新加载（当表单可见时）？

Answer 1

要使其发挥作用，您需要做两件事：

要监控浏览器后退按钮，请单击，使用 window.onpopstate 方法
要记住表单状态，您需要将值存储在 localStorage或Cookie中。

这是一个基本的例子：

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;

＆＃13;

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;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

同样在Fiddle，您可以看到它的工作原理。

如何通过在javascript

1 个答案: