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

Question

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

我要做的是确保当用户点击或关闭（即在项目之间）时，这会被注册为历史遍历事件，并且在浏览器的历史记录中可以看到新项目的新条目。< / p>

我在单击导航按钮时设置了一个事件，对页面内容进行了必要的更改，然后我尝试通过调用此函数将新页面推送到历史对象（请参阅{{ 3}}和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中，历史记录以大多数正确的方式更新：历史记录状态中的网址对象是正确的，就像这个内容一样。因此，如果我单击其中一个历史事件，则会检索到正确的页面。

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

有什么想法吗？

Answer 1

我发现了这个问题。我需要先设置document.title。这意味着在我致电history.pushState()之前的某个地方，我需要这样做：

document.title = theNewTitle;