Google自定义搜索 - 在不刷新页面的情况下更改网址

Question

我想在this page中实现与Google自定义搜索类似的结果。 如果您查看页面和源代码，就可以了解Google自定义搜索的实现方式。当有人输入搜索词并按搜索按钮时，它不会刷新页面，但会显示结果。太棒了。所以，我想实现它。

此外，按下提交按钮时，地址栏中的URL不会更改。但是，我想在提交表单用于SEO目的时在URL中添加查询。例如，如果有人搜索世界，则网址应更改为 index.html？q = world ，但不会刷新页面。

如何使用javascript或jquery实现它？

感谢您的帮助。

Answer 1

您可以使用HTML5历史记录机制在现代浏览器中执行此操作： http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/

e.g。像这样：

window.history.pushState("object or string", "Title", "/new-url");

在您的页面上，您可以拥有自己的搜索按钮，当用户点击您以编程方式执行查询时，您可以更改地址栏：

var element = google.search.cse.element.getElement('element1);
element.execute('news');
window.history.pushState("object or string", "Title", "/?q=news");