Question

是否可以在加载页面后通过JavaScript更改浏览器历史记录中页面的标题？应该是跨浏览器（当然）并且在不支持HTML5历史记录API的浏览器上工作，我的主要目标浏览器是Chrome。

我尝试了很多方法，但似乎没有一种方法可靠。以下是我上次尝试的内容（history.js）：

log4j.rootLogger=ERROR, applog log4j.logger.org.springframework=ERROR
log4j.appender.applog=org.apache.log4j.DailyRollingFileAppen‌der
log4j.appender.applog.File=/application/ABC/appLogs1/appLog.‌log
log4j.appender.applog.layout=org.apache.log4j.PatternLayout
log4j.appender.applog.layout.ConversionPattern=%d{ISO8601} %-5p %c %t - %m\n

如果我在页面加载后3秒内在Chrom中加载历史记录页面，我会看到<html> <head> <title>Standard title</title> <script src="https://rawgit.com/browserstate/history.js/master/scripts/bundled-uncompressed/html4%2Bhtml5/native.history.js"></script> </head> <body> <script> window.setTimeout(function(){ document.title = "My custom title"; History.replaceState({}, "My custom title", window.location.href); }, 3000); </script> </body> </html>，3秒后我会得到Standard title。

为什么我需要这个：我有一个只适用于JavaScript的应用程序（Angular 1），它运行在不同的环境（开发，测试，生产）上。我想显示My custom title这样的标题，但我不想为每个环境构建应用程序的单独版本。相反，应用程序可以通过AJAX从后端请求环境信息并更新页面标题。所有这一切都很好（页面标题得到更新），但浏览器历史记录仍显示＆＃34;标准＆＃34;标题。

是否有办法在浏览器历史记录中更改页面标题？

Answer 1

简短回答：您似乎无法在Chrome中为同一个网址保留不同的标题记录。

免责声明：我只是偶然发现了这个问题而且之前没有经验。尽管如此，问题是如此清晰和有趣，以至于我忍不住做了一些实验：

首先，我同意历史记录标签中显示的历史记录（即页面标题）不太可靠（可能是错误或缓存）。

所以我决定查看Chrome历史记录的数据库文件，例如，使用DB Browser for SQLite。

令我惊讶的是，Chrome历史记录只保留每个网址的一个版本（最新版本）。当我History.replaceState({}, "My custom title", window.location.href);时，标题会在数据库中更新。

然而，@ Bekim的方法不会改变数据库中的标题。

Answer 2

问题在于replaceState()的第二个参数title参数当前被所有实现的浏览器忽略。但是，会考虑pushState上的第三个参数url。不幸的是，根据我的测试，它不适用于replaceState（至少不适用于Chrome或Edge）。

考虑到这一点，从客户端，您可以使用以下解决方法之一，无论您的口味如何：

history.pushState({}, "", "my-custom-appendix");
history.pushState({}, "", "#my-custom-appendix");

在Chrome中，这会创建其他条目，其标题分别为http://myurl/my-custom-appendix或http://myurl/#my-custom-appendix。我相信这是您可以从客户端获得的最接近的，副作用是您将在浏览器历史记录中获得新的历史记录条目 - 对于您的应用的每次访问，您基本上都会看到（在增加时间戳顺序）：

标准标题
http://myurl/my-custom-appendix

即使您将第二个参数设置为非空字符串（至少在我的结果中发生了什么），您也会将URL视为标题。

对于更强大的方法，您需要使用简单的服务器端预处理器AFAIK，如PHP。

Answer 3

这是最简单的事情

document.title = "My App " +environmentName;

历史记录将立即更新新文档标题。

能够对其进行积极测试，请尝试按照以下几个步骤进行测试。

第一次将以下内容复制粘贴到控制台中并执行：

name = '{ "location": ["http://stackoverflow.com/questions/12689408/how-can-jquery-window-location-hash-replace","http://stackoverflow.com/questions/12978739/is-there-a-javascript-api-to-browser-history-information-limited-to-current-dom","http://stackoverflow.com/questions/24653265/angular-browser-history-back-without-reload-previous-page"],"title" : ["Page 1", "Page 2", "Page 3"]}';

    document.title = "Where We've Started";

第二次复制 - 在控制台中粘贴以下内容并执行3次

nm = JSON.parse(name);
location = nm.location[0];

第3次加载位置后，请执行以下

nm = JSON.parse(name);
document.title = nm.title[0];

每次增加数组索引，如：

location = nm.location[1];
document.title = nm.title[1];

（最大指数为3，例如数字2）然后单击并按住后退按钮以显示最新的历史记录条目，全部合理并更新以反映新文档标题。

警告：如果在您退回到给定的历史记录条目后脚本未运行，则页面标题将按预期还原到现有的硬编码文档标题。但由于这些历史控制名称将由脚本在所有页面中提供，因此它们也将继续反映所提供的实时文档标题。这是人们在回到历史中的硬编码页面时被欺骗的地方。并且想：“该死的：出了点问题！”

图1：在单独/新窗口上执行的演示代码的结束结果。

Answer 4

与angularjs相关： -

在模块后添加run方法： -

.run（function（$ rootScope）{

$rootScope.$on('$stateChangeSuccess', function (evt, toState) {
    window.document.title = toState.title + ' - example.com';
});

}）;

您的州： -

.state（'productDetail'，{

    title: 'Details of selected product',
    url: '/Detail.html',
    templateUrl: '/product-details.html',
    controller: 'ProductDetailsCtrl'

  })

.STATE（ 'categoryManager'，{

    title: 'Category Manager',
    url: '/category-Manager.html',
    templateUrl: 'categoryManager.html',
    controller: 'categoryManagerCtrl'

  });

这将根据您的州状态更改标题。

Answer 5

Firefox 52 。简单的：

document.title = 'CoolCmd';

Chrome 57 需要一些魔力。此变体也适用于Firefox 52.它不会在浏览器历史记录中添加不必要的条目。

// HACK Do not change the order of these two lines!
history.replaceState(null, '');
document.title = 'CoolCmd';

MS Edge 14.14393 不允许更改历史记录中文档的标题。他甚至没有将history.pushState()指定的地址添加到历史记录中！ LOL

我没有测试Safari ......

通过JavaScript可靠地更改浏览器历史记录中的页面标题

5 个答案: