Здравствуйте,
В Firefox название предыдущей страницы, которое появляется при щелчке правой кнопкой мыши по стрелке «Назад», перезаписывается названием текущей страницы.
Например, если первая отображаемая страница:
https://meta.discourse.org/
посмотрите, как выглядит щелчок правой кнопкой мыши по стрелке (это верно):
Затем, перейдя по любой теме, например:
название предыдущей страницы было заменено названием текущей страницы:
Тем не менее, ссылка остаётся рабочей.
Есть какие-то идеи насчет этого бага?
Действительно, похоже на баг, возможно, связанный с тем, как или в какой последовательности мы заменяем историю, или на особенность Firefox.
Мне удалось воспроизвести проблему.
Поскольку это довольно незначительный баг, я добавлю метку pr-welcome на случай, если сообщество захочет помочь и предложить исправление.
Хорошо, спасибо за ответ
Я выяснил, что эта ошибка также проявляется в виде частично повреждённых записей в истории браузера, что я считаю более серьёзной проблемой. В частности, при навигации, управляемой JavaScript, старому URL присваивается новый заголовок. Это происходит почти всегда в Firefox, но довольно редко в Chrome (на данный момент я нашёл лишь один случай: переход от /top к теме).
@sam прав: причина кроется в порядке операций, в котором изменяются URL и заголовок. Хотелось бы, чтобы где-то был опубликован справочник с лучшими практиками, указывающий правильный порядок: всегда обновлять заголовок после вызова history API.
Я попытался провести отладку (и хочу заранее сказать, что я крайне не склонен разрабатывать какие-либо относительно крупные проекты, связанные с npm). Изначально я использовал этот код для небольшого разведывательного анализа:
Object.defineProperty(document, "title", {
get() {
return document.head.querySelector('title').innerText;
},
set(t) {
console.debug('title', t, new Error("title!").stack)
debugger;
document.head.querySelector('title').innerText = t;
},
enumerable: true,
configurable: true,
});
let ___push___ = window.history.pushState;
window.history.pushState = function(...args) {
console.debug('push', args[0], new Error().stack);
debugger;
___push___.apply(this, args);
};
let ___replace___ = window.history.replaceState;
window.history.replaceState = function(...args) {
console.debug('replace', args[0], new Error().stack);
debugger;
___replace___.apply(this, args);
};
Это действительно показало, что почти всегда изменение заголовка происходит непосредственно перед операцией history API. К сожалению, это не было более полезным: сопоставление того, что происходит во время выполнения, с исходным кодом оказалось довольно сложным — интересующие операции сильно разбросаны, стек вызовов введён в заблуждение, поскольку выполнение уже перешло к циклу событий Ember, и в целом процесс отладки в Firefox был довольно адским. Переключившись на Chrome, я добился несколько большего успеха. Если коротко, насколько мне известно, Ember сам решает, когда обновлять URL. С другой стороны, изменение заголовка может быть инициировано из двух мест: [1] и [2]
Лишь второе из них выполняется перед вызовом history API. Их общий предок в коде находится здесь:
// Run all the necessary enter/setup/exit hooks
this.setupContexts(newState, transition); // <- изменение заголовка инициируется здесь, запуская событие `model.title:change`
// Check if a redirect occurred in enter/setup
if (transition.isAborted) {
// TODO: cleaner way? distinguish b/w targetRouteInfos?
this.state!.routeInfos = this.currentRouteInfos!;
return Promise.reject(logAbort(transition));
}
this._updateURL(transition, newState); // <- изменение URL инициируется здесь
Интересно, что «router.js — это микробиблиотека маршрутизации, используемая Ember.js».
Теперь я хотел бы передать решение этой проблемы кому-то, кто, в отличие от меня, хоть немного знаком с кодовой базой discourse.
Редактирование: забыл упомянуть: document.title изменяется [1] один или несколько раз после того, как он был изменён [2] и URL был изменён с помощью history API.
(как новый пользователь я не могу добавить больше двух ссылок в сообщение 