Сайте StackOverflow комментарий HTML-код привязки, такие как "http://SO/...#comment41994753_26699358"
Я обнаружил, что комментарий SO может быть привязан и мне трудно понять реализацию. Следующая ссылка является примером привязки комментария:
http://SO/questions/26696064/slug/26699358?noredirect=1#comment41994753_26699358
Из моего понимания html, comment41994753_26699358после #должен существовать на странице html, но я не нашел idили nameв нем. Когда я читаю исходный код, я нахожу только относительный исходный код:
<div id="comments-26699358" class="comments ">
<table>
<tbody data-remaining-comments-count="0" data-canpost="true" data-cansee="false" data-comments-unavailable="false" data-addlink-disabled="false">
<tr id="comment-41994753" class="comment ">
Этот фрагмент кода сообщает мне только два относительных и разделенных идентификатора id="comment-41994753"и id="comments-26699358", окончательный якорь comment41994753_26699358генерируется из них? Или это связано с используемой структурой?
Ответы - Сайте StackOverflow комментарий HTML-код привязки, такие как "http://SO/...#comment41994753_26699358" / StackOverflow comment's html anchor such as "http://SO/...#comment41994753_26699358"
09.06.2015 11:44:50
Это не поведение браузера, оранжевый цвет фона и его прокрутка в поле зрения происходит с JavaScript.
Код находится в этом файле: http://cdn.sstatic.net/Js/full.en.js
Не уменьшенная версия: http://dev.stackoverflow.com/content/js/full.js
Важными функциями являются onHashChange_HighlightDestinationи doHighlight:
onHashChange_HighlightDestination:
Он анализирует хэш-аргумент, например #comment49509148_30726127и вызывает метод выделения впоследствии.
// answers have the form 'lies-like/58534#58534'; comments are 'lies-like/58534#comment60949_58534'
var match = decodeURI(url).match(/#(\d+|comment(\d+)_(\d+))/i);
if (!match) return; // moderator viewing a flagged question, e.g. 'lies-like#question'
if (match[2])
highlightComment(match[2], match[3]);
else
highlightAnswer(match[1]);
doHighlight: этот метод, наконец, выделяет его (оранжевый фон) и прокручивает комментарий/ответ в поле зрения с помощью функции scrollIntoView.
var doHighlight = function (jEle) {
var originalColor = backgroundColor;
jEle
.css({ backgroundColor: highlightColor })
.animate({ backgroundColor: originalColor }, 2000, 'linear', function () { $(this).css('background-color', ''); });
if (jEle.is('.comment'))
jEle[0].scrollIntoView(true);
};
#comment41994753_26699358, или, скажем, перейти к комментарию? Я понимаю, простейший якорь ссылка пример : <a href="#anyword">Jump to any place</a> и <a name="anyword">Jump to this place</a>
scrollIntoViewсделать конкретный комментарий прокрутите до верхней части страницы?
09.06.2015 11:56:34
Ответ заключается в onHashChange_HighlightDestinationметода init, который срабатывает при каждом запросе.
Как вы можете видеть в выпуске разработчика кода javascript, он пытается извлечь идентификатор сообщения и идентификатор комментария из хэша запроса:
initОттуда он вызывает var match = decodeURI(url).match(/#(\d+|comment(\d+)_(\d+))/i);
, который выполняет выделение highlightCommentи CSS.