6

我已经为客户端创建了一个搜索页面，但在这种情况下，实际的搜索页面位于 an 中iframe，并且向用户呈现了一个围绕 said 的装饰性外壳iframe，它将其 URL 参数传递给iframe，然后解释它们并执行搜索. 这是我无法改变的。它还向我提出了一个独特的问题，即如果用户在搜索页面的搜索栏中键入以执行另一个搜索，iframe 会刷新但 shell 页面不会。这意味着该 URL 现在不再与当前搜索相关。如何在不离开这个 shell 页面的情况下更改地址栏中的 URL？这个系统的全部意义在于减少等待iframe刷新而不是整个页面，所以刷新整个页面会适得其反。

完整的解决方案

对于只需要代码片段的任何人，这是我对 Ian 解决方案的最终实现：

<?PHP
// ...
function buildTitleChanger($search) {
    ?>

    window.top.history.pushState({search : "<?PHP echo str_replace("\"", "\\\"", $search); ?>"}, document.title, window.location.search);
    window.top.document.title = document.title;<?PHP
}
// ...
?>

内联 PHP 有点脏，但它在 100% 的时间里都能正常工作：3

4

1 回答 1

8

您可以使用类似的内容更改 URL 的一部分window.pushState。看看MDN的解释：

https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

浏览器兼容性：http ://caniuse.com/history

history.js 是一个很好的库，它包含了这些特性并在不支持它的浏览器中提供了类似的功能：http: //balupton.github.io/history.js/demo/

来自 MDN 链接的示例：

例子

假设http://mozilla.org/foo.html执行以下 JavaScript：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

这将导致 URL 栏显示http://mozilla.org/bar.html，但不会导致浏览器加载bar.html甚至检查是否bar.html存在。

现在假设用户现在导航到http://google.com，然后单击返回。此时，URL 栏将显示http://mozilla.org/bar.html，页面将获得一个popstate事件，其状态对象包含 的副本stateObj。页面本身看起来像，尽管页面可能会在事件foo.html期间修改其内容。popstate

如果我们再次单击返回，URL 将变为http://mozilla.org/foo.html，并且文档将获得另一个popstate事件，这次是一个空状态对象。在这里，返回也不会改变上一步中的文档内容，尽管文档可能会在接收到popstate事件后手动更新其内容。

于 2013-04-25T06:01:03.093 回答