Javascript 如何将当前页面推送到浏览器历史记录_Javascript_Jquery_Ajax

Javascript 如何将当前页面推送到浏览器历史记录

javascript jquery ajax

Javascript 如何将当前页面推送到浏览器历史记录,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一个页面，用户可以使用输入过滤结果。在输入条目中输入一些字符后，人们喜欢使用浏览器中的“后退”按钮返回到输入的“空”状态，而不是手动删除但是结果是由AJAX获取的，这意味着后退按钮的行为是错误的（不能清除输入条目，而只是返回到上一页），是否可以将空的或当前的url推到后堆栈中，以便用户可以获得他们想要的结果说清楚一点，我想： 1) user enter some characters to the input entry 2) user press "filter" button 3)

我有一个页面，用户可以使用输入过滤结果。在输入条目中输入一些字符后，人们喜欢使用浏览器中的“后退”按钮返回到输入的“空”状态，而不是手动删除

但是结果是由AJAX获取的，这意味着后退按钮的行为是错误的（不能清除输入条目，而只是返回到上一页），是否可以将空的或当前的url推到后堆栈中，以便用户可以获得他们想要的结果

说清楚一点，我想：

1) user enter some characters to the input entry
2) user press "filter" button
3) user press back button
4) the input entry is cleared

这里有两种管理历史的通用方法。虽然您可能需要调整代码，但它们都将使用“空白页”的想法

这两种方法使用片段标识符或新的历史API

使用片段标识符将如下所示：

<body onhashchange="hashChanged()" onload="hashChanged()">

<input id='query'></input><button onclick="location.hash = '#'+document.getElementById('query').value">Query</button>

<script type="text/javascript">

function query(str) {
    // do your ajaxy thing
}

function hashChanged() {
    var str = location.hash.substring(1);
    document.getElementById('query').value = str;
    query(str);
}

</script>
</body>


查询
函数查询（str）{
//做你的ajaxy事
}
函数hashChanged（）{
var str=location.hash.substring（1）；
document.getElementById（'query'）。value=str；
查询（str）；
}

这项技术适用于ie8、firefox 3.6和chrome 5。您可以通过隐藏滚动区域和检测滚动，或者定期轮询位置的哈希部分，将类似的内容侵入早期浏览器

另一种方法使用新的历史API

<body onload="queryChanged();">

<input id='query'></input><button onclick="history.pushState(str, "", "?query="+str);query(document.getElementById('query').value)">Query</button>

<script type="text/javascript">

function query(str) {
    // do your ajaxy thing
}

function queryChanged() {
    var str = "";
    var re = /[\?|&]query=([^&]*)/
    if (re.test(location.search)) {
        str = re.exec(location.search)[1];
    }
    document.getElementById('query').value = str;
    query(str);
}

window.onpopstate = queryChanged;
</script>
</body>


查询
函数查询（str）{
//做你的ajaxy事
}
函数queryChanged（）{
var str=“”；
变量re=/[\？\&]查询=（[^&]*）/
if（重新测试（位置搜索））{
str=re.exec（location.search）[1]；
}
document.getElementById（'query'）。value=str；
查询（str）；
}
window.onpopstate=queryChanged；

这在最新的firefox和chrome中有效，但仅限于ie10

当然，你最好使用图书馆。一个旧的是，但是jquery有更多的现代插件提供类似的功能，例如，或者第4步中的。

页面上的内容是否也应该被取消过滤？在这种情况下，放弃ajax部分不是更容易吗。通过使用带有过滤器的常规http get作为参数，您将自动获得正确的行为。您可以使用URL的#部分。参考此