添加到浏览器的历史没有页面重载 [英] Add to browser history without page reload

问题描述

基本上，我有一个包含表单的页面。当用户提交表单，一个Javscript函数被调用，用户动态美元，一个新的形式psented p $。

在这一点上，我想是用户能够点击浏览器的后退按钮被带回第一个形式。这可能吗？

---

感谢您的快速反应，但我有麻烦pushState的工作。该HTML仍显示第二种形式我点击后退按钮后。

下面是code我用来测试它：

 ＆LT;脚本＆GT;
功能NEWPAGE（）{
    history.pushState（{状态：1}国1，国家= 1？）;
    的document.getElementById（'formBox'）的innerHTML =第二种形式。
}
＆LT; / SCRIPT＆GT;
＆LT;输入类型=按钮的onclick =NEWPAGE（）;值=前进/＆GT;
＆LT; D​​IV ID ='formBox'＆gt;首先形式＆LT; / DIV＆GT;
 

解决方案

我已经完成了类似的行为与HTML5历史/国的API，使用的History.js ，如此描述：

  

为所有HTML5的浏览器跨兼容的经验（他们都
  实现HTML5 API历史一点点的不同造成
  不同的行为，有时错误 - History.js修复此
  确保如预期经验/相同/整个大
  HTML5的浏览器）

例如：

  History.pushState（{状态：1}国1，？状态= 1）;
 

Basically, I have a page that contains a form. When a user submits that form, a Javscript function is called and the user is dynamically presented with a new form.

At this point, what I would like is for the user to be able to click the browser's back button and be taken back to the first form. Is this possible?

---

Thanks for the quick responses, but I am having trouble getting pushState to work. The HTML still displays "second form" after I click the back button.

Here is the code I used to test it:

<script>
function newPage(){
    history.pushState({state:1}, "State 1", "?state=1");
    document.getElementById('formBox').innerHTML="second form";
}
</script>


<input type="button" onclick="newPage();" value="forward" />
<div id='formBox'>first form</div>

解决方案

I've accomplished similar behaviour with the HTML5 History/State APIs, using History.js, described thus:

Provide a cross-compatible experience for all HTML5 Browsers (they all implement the HTML5 History API a little bit differently causing different behaviours and sometimes bugs - History.js fixes this ensuring the experience is as expected / the same / great throughout the HTML5 browsers)

Example:

History.pushState({state:1}, "State 1", "?state=1");

这篇关于添加到浏览器的历史没有页面重载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！