Question

我为客户创建了一个搜索页面，但是在这种情况下，实际的搜索页面位于iframe中，并且用户会看到一个围绕所述iframe的装饰外壳，它通过了iframe的URL参数，然后解释它们并执行搜索。这是我无法改变的。它还向我提出了一个独特的问题，即如果用户键入搜索页面的搜索栏以执行其他搜索，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之类的内容更改部分网址。看看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");

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

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

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

Answer 2

看看这个 Change address bar URL

我可以在不导航的情况下更改地址栏中的文字吗？

完整解决方案

2 个答案: