javascript - 无法强制浏览器将按钮单击视为历史遍历事件

Question

我正在构建一个通过一系列方向按钮进行导航的网站。右键单击和左键单击可在与一个项目关联的不同图像之间移动。向上和向下单击在项目之间移动。

我想做的是确保当用户向上或向下单击(即在项目之间)时，这被注册为历史遍历事件，并且新项目的新条目在浏览器的历史记录中可见。

我的代码在单击导航按钮时设置了一个事件，该事件对页面内容进行必要的更改，然后我尝试通过调用此函数将新页面推送到历史对象(请参阅 here 和here 获取背景信息):

var pushToHistory = function(url, pageTitle, html) {
    history.pushState({'html':html, 'pageTitle':pageTitle}, '', url); 
}

我在页面加载新内容后执行以下操作，在其他地方为此函数提供参数:

html = document.getElementsByClassName('main-frame')[0].innerHTML
pageTitle = 'http://mysite/'+newpath;    // new path specifieds the new item. 
this.pushToHistory( url, pageTitle, html);

现在我遇到的问题是，所有这一切的结果是，在 Chrome 和 Firefox 中，历史记录都以大部分正确的方式更新:历史记录状态中的 url对象是正确的，这就是内容。这样，如果我单击这些历史事件之一，就会检索到正确的页面。

但是，历史项目列表中显示的页面标题不正确。它始终是站点首次加载时加载的页面的标题。因此，如果我加载 mysite/a-project，并且页面标题是“我的网站 - 一个项目”，则始终出现在框中。我还检查了我的代码以确保 pageTitle 对象正确，因此在调用 history.pushState() 之前转储 pageTitle 会显示正确的标题。

有什么想法吗？

Answer 1

我发现了这个问题。我需要先设置 document.title 。这意味着在我调用 history.pushState() 之前，我需要执行以下操作:

document.title = theNewTitle;