StackOverflow評論的html錨如「http：//SO/...#comment41994753_26699358」

我發現SO的評論可以錨定和難以理解的工具。下面的鏈接是an example錨固評論：StackOverflow評論的html錨如「http：//SO/...#comment41994753_26699358」

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 ">

這個片段只是告訴我兩個相對分離IDS id="comment-41994753"和id="comments-26699358"，由他們產生的最終錨comment41994753_26699358？或者這與使用的框架相關？

來源

2015-06-09 abelard2008

它沒有瀏覽器行爲，橙色背景顏色和滾動到視圖發生在JavaScript中。

的代碼是在這個文件：http://cdn.sstatic.net/Js/full.en.js
非縮小的版本：http://dev.stackoverflow.com/content/js/full.js

的重要功能是onHashChange_HighlightDestination和doHighlight：

onHashChange_HighlightDestination：
它解析哈希的說法，即G。 #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); 
};

來源

2015-06-09 08:44:50 Andy

我很抱歉，也許我的問題不清楚？我不在乎顏色，我關心的是，如何以「＃comment41994753_26699358」來錨定評論，或者說，瀏覽評論？我理解最簡單的鏈接示例：'Jump to any place'和'Jump to this place' – abelard2008

@@ Andy，'scrollIntoView'使特定註釋滾動到頁面的最頂部？ – abelard2008

@ abelard2008的確，我只是編輯了我的答案來澄清這一點。 – Andy

答案在於在JavaScript代碼，它是從所述init方法，其中觸發在每次請求稱爲onHashChange_HighlightDestination功能。

正如你可以在developer edition of the javascript code看到，它會嘗試從請求哈希提取的帖子ID和註釋ID：

var match = decodeURI(url).match(/#(\d+|comment(\d+)_(\d+))/i);

從那裏調用highlightComment，它執行scrollIntoView和CSS高亮。

來源

2015-06-09 08:56:34

@@ Patrick，當用戶在url地址中按回車鍵時，會調用'onHashChange_HighlightDestination'，然後'highlightComment'，我說得對嗎？ – abelard2008

不，它只是在頁面加載時調用它。 –

@@帕特里克，我很抱歉不要將您的答案標記爲已接受 – abelard2008

StackOverflow評論的html錨如「http：//SO/...#comment41994753_26699358」

回答

相關問題