logo标签列表

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

javascriptjqueryajax
5
我是一名有帮助的助手，可以为您翻译以下内容。这段文本涉及到IT技术。在用户使用输入框进行结果筛选时，他们通常会使用浏览器的后退按钮来返回到“空”状态，而不是手动删除输入的字符。
但是，由于结果使用了AJAX获取，这意味着后退按钮的行为是错误的（无法清除输入，只能返回到先前的页面）。是否可以将空URL或当前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
第四步，页面上的内容也应该不经过过滤吗？如果是这样的话，放弃ajax部分会更容易。通过使用带有过滤器参数的常规http get请求，您将自动获得正确的行为。 - harald
2
你可以尝试修改URL中的 #<fragment> 部分。 - kapa
请参考此链接：http://plugins.jquery.com/plugin-tags/bookmark - Vicky
1个回答
2
这里有两种管理历史记录的常见方法。它们都可以使用“空白页面”思想，尽管您可能需要调整代码。
这两种方法分别使用片段标识符或新的历史记录 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插件。”
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接