[英]Reliably change page title in browser history via JavaScript
是否可以在加載頁面后通過JavaScript更改瀏覽器歷史記錄中頁面的標題？ 應該是跨瀏覽器（當然）並且在不支持HTML5歷史記錄API的瀏覽器上工作，我的主要目標瀏覽器是Chrome。
我已經嘗試了很多方法，但它們似乎都不可靠。 這是我上次嘗試過的（ history.js ）：
<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秒內在Chrom中加載歷史頁面，我會看到Standard title ，3秒后我得到My custom title 。
為什么我需要這個：我有一個只適用於JavaScript的應用程序（Angular 1），它運行在不同的環境（開發，測試，生產）上。 我想顯示像MyApp (<environmentName>)這樣的標題，但我不想為每個環境構建我的應用程序的單獨版本。 相反，應用程序可以通過AJAX從后端請求環境信息並更新頁面標題。 所有這一切都很好（頁面標題得到更新），但瀏覽器歷史記錄仍顯示“標准”標題。
有沒有辦法在瀏覽器歷史記錄中更改頁面的標題？
簡短回答 ：您似乎無法在Chrome中為同一個網址保留不同的標題記錄。
免責聲明 ：我只是偶然發現了這個問題並沒有任何先前的經驗。 盡管如此，問題是如此清晰和有趣，以至於我忍不住做了一些實驗：
首先，我同意歷史記錄選項卡中顯示的歷史記錄（即頁面標題）不那么可靠（可能是錯誤或緩存）。
因此，我決定查看Chrome歷史記錄的數據庫文件，例如，使用DB Browser for SQLite 。
令我驚訝的是，Chrome歷史記錄只保留每個網址的一個版本（最新）標題。 當我做History.replaceState({}, "My custom title", window.location.href); ，標題確實在數據庫中更新。
但是，@ Bekim的方法不會改變數據庫中的標題。
問題是，當前所有實現的瀏覽器都會忽略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 （分別）。 我相信這是您可以從客戶端獲得的最接近的，副作用是您將在瀏覽器歷史記錄中獲得一個新的歷史記錄條目 - 對於您的應用程序的每次訪問，您基本上都會看到（按時間戳順序增加） ）：
即使您將第二個參數設置為非空字符串，您也會看到URL作為標題（至少這是我的結果）。
對於更強大的方法，您需要使用簡單的服務器端預處理器AFAIK，如PHP。
那是最簡單的事情
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，例如num 2）
然后單擊並按住后退按鈕以顯示最新的歷史記錄條目，全部合理並更新以反映新文檔標題。
警告：如果在您退回到給定的歷史記錄條目后腳本未運行，則頁面標題將按預期還原為現有的硬編碼文檔標題。 但由於這些歷史控制名稱將由腳本在所有頁面中提供，因此它們也將繼續反映所提供的實時文檔標題。 這是人們在回到歷史中的硬編碼頁面時被欺騙的地方。 並且想：“該死的：出了點問題！”
圖1：在單獨/新窗口上執行的演示代碼的結束結果。
與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'
});
這會根據你的州改變頭銜。
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()指定的地址添加到歷史記錄中！ 大聲笑
我沒有測試Safari ...
您可以使用document.write()在文檔仍然加載時將其正確地寫入文檔。 但它需要同步請求到服務器：
<head>
<script>
(function () {
// Get title using sync request.
var title = "Value from server";
document.write("<title>"+ title + "</title>");
})();
</script>
</head>
包含上面剪切的頁面將在瀏覽器歷史記錄中顯示“服務器中的值”標題。
了解（通過 JavaScript）是否使用瀏覽器的歷史記錄到達當前頁面
[英]Understand (via JavaScript) if the current page is reached using browser's history
我可以通過javascript獲取頁面訪問者的完整瀏覽器歷史記錄嗎？
[英]Can I get a page visitors full browser history via javascript?
使用Backbone更新頁面標題，以便在瀏覽器歷史記錄中正確顯示
[英]Updating page title with Backbone so it shows properly in browser history
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.