javascript - 我可以在不离开的情况下更改地址栏中的文本吗？

Question

我为客户制作了一个搜索页面，但在这种情况下，实际的搜索页面位于 iframe 中。并向用户呈现一个围绕所述 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

Answer 1

您可以使用 window.pushState 之类的内容更改部分 URL。看看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，然后点击返回。此时，地址栏会显示http://mozilla.org/bar.html，页面会得到一个popstate事件，它的state对象包含了一份状态对象。该页面本身看起来像 foo.html，尽管该页面可能会在 popstate 事件期间修改其内容。

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