Сайте StackOverflow комментарий HTML-код привязки, такие как "http://SO/...#comment41994753_26699358"

09.06.2015 10:54:33 Просмотров 64 Источник

Я обнаружил, что комментарий 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"

Является ответом!

Andy

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);
};

Источник

https://stackoverflow.com/questions/30726101/stackoverflow-comments-html-anchor-such-as-http-so-comment41994753-26699/30727103#comment49510957_30727103

Мне так жаль, может быть, мой вопрос не ясен? Я не забочусь о цвете, я забочусь о том, как так можно закрепить комментарий с #comment41994753_26699358, или, скажем, перейти к комментарию? Я понимаю, простейший якорь ссылка пример : <a href="#anyword">Jump to any place</a> и <a name="anyword">Jump to this place</a>

Источник

@@Andy, scrollIntoViewсделать конкретный комментарий прокрутите до верхней части страницы?

Источник

@abelard2008 точно, я просто отредактировал свой ответ, чтобы прояснить это.

Источник

Patrick Hofman

09.06.2015 11:56:34

Ответ заключается в onHashChange_HighlightDestinationметода init, который срабатывает при каждом запросе.

Как вы можете видеть в выпуске разработчика кода javascript, он пытается извлечь идентификатор сообщения и идентификатор комментария из хэша запроса:

init

Оттуда он вызывает var match = decodeURI(url).match(/#(\d+|comment(\d+)_(\d+))/i);, который выполняет выделение highlightCommentи CSS.

Источник

https://stackoverflow.com/questions/30726101/stackoverflow-comments-html-anchor-such-as-http-so-comment41994753-26699/30727384#comment49511479_30727384

@@Patrick, когда пользователь нажимает клавишу enter в url-адресе, onHashChange_HighlightDestination будет вызван, а затем highlightComment , я прав?

Источник

Нет, он просто вызывает его, когда страница загружается.

Источник

@@Патрик, мне очень жаль не отметить Ваш ответ как принятый

Источник