Question

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

但是结果是由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

Answer 1

以下是管理历史的两种常用方法。虽然你可能需要调整代码，但它们都可以使用“空白页面”的想法。

这样做的两种方法是使用片段标识符或新的历史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>

这种技术适用于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>

这适用于最近的firefox和chrome，但只有ie10。

当然，您最好使用图书馆。一个旧版本是Really Simple History，但是有更多现代的jquery插件可以提供类似的功能，例如BBQ或hashchange plugin。

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

1 个答案: