abbr [title] | Facebook，始終顯示工具提示{timestamp}？

Question

<abbr title="Sunday, January 01, 2017 at 12:12am" 
data-utime="0000000000" data-shorten="1" 
class="_5ptz timestamp livetimestamp"> 
<span class="timestampContent" id="js_d">1 hr</span></abbr> 

我發現了一個腳本，但它不再有效。那麼，這裏有誰願意分享如何做到這一點？

document.addEventListener("load", DisplayTimestamp()); 

function DisplayTimestamp() { 
    var i; 

    if (document.getElementsByTagName && document.getElementsByTagName("abbr").length > 0) { 
     for (i = 0; i < document.getElementsByTagName("abbr").length; i++) { 
      document.getElementsByTagName("abbr")[i].innerHTML += " 
    (" + new Date(document.getElementsByTagName("abbr")[i].title).toLocaleString() + ")"; 
     } 
    } 
} 

到目前爲止，儘管不知道javascript，我仍取得了進展。

我發現，

document.getElementsByTagName("abbr").title; 
document.getElementsByTagName("abbr")[i].innerHTML;  
document.getElementsByTagName("abbr")[i].title; 

實際上獲得了冠軍，並輸出它在控制檯中。不知道從這裏開始做什麼。

進一步的進展，我設法讓它在實際的頁面上，從控制檯進行更改。

var i = 0; 
var d = new Date(); 
var n = d.toLocaleString(); 
document.getElementsByTagName("abbr")[i].title; 
document.getElementsByTagName("abbr")[i].innerHTML;  
document.getElementsByTagName("abbr")[i].title; 
document.getElementsByTagName("abbr")[i].innerHTML = n; 

我不知道是什麼，我需要做的就是在一個腳本工作，始終顯示時間戳，我大概可以在這一點上，雖然使一個按鈕，點擊後顯示的時間戳，以及只需將其構建到瀏覽器擴展中。

如果我希望它顯示在Word格式的實際日期和月份，

var i = 0; 
var n = document.getElementsByTagName("abbr")[i].title.toLocaleString(); 
document.getElementsByTagName("abbr")[i].title; 
document.getElementsByTagName("abbr")[i].innerHTML; 
document.getElementsByTagName("abbr")[i].title; 
document.getElementsByTagName("abbr")[i].innerHTML = n; 

進一步的進展：

(function DisplayTimestamp() { 
    var i; 
    var abbrs = document.getElementsByTagName("abbr") 
    if (document.getElementsByTagName && abbrs.length > 0) { 
     for (i = 0; i < abbrs.length; i++) { 
      abbrs[i].innerHTML += "(" + abbrs[i].title.toLocaleString() + ")"; 
      //console.log(document.getElementsByTagName("abbr")[i].title.toLocaleString()) 
     } 
    } 
})() 

Answer 1

使用data-utime屬性構造日期，所以假設abbr是元件參考：

new Date(abbr.dataset.utime * 1000).toLocaleString() 

但是，由於Facebook動態加載內容，最好使用MutationObserver處理頁面加載後（即滾動時）添加的帖子。這也將幫助我們使時間戳將出現沒有任何延遲加入@run-at document-start：

// ==UserScript== 
// @name  FB: full timestamps 
// @match *://www.facebook.com/* 
// @run-at document-start 
// @grant GM_addStyle 
// @require https://greasyfork.org/scripts/12228/code/setMutationHandler.js 
// ==/UserScript== 

GM_addStyle(
    '.full-timestamp { opacity: 0.5; }' + 
    '.full-timestamp:hover { opacity: 1.0; }' + 
    '.full-timestamp:before { content: " ("; }' + 
    '.full-timestamp:after { content: ")"; }' 
); 

// process the already loaded portion of the page if any 
expandDates(document.querySelectorAll('abbr[data-utime]')); 

// process the stuff added from now on 
setMutationHandler(document, 'abbr[data-utime]', expandDates); 

function expandDates(nodes) { 
    for (var i = 0, abbr; (abbr = nodes[i++]);) { 
     if (abbr.querySelector('.full-timestamp')) { 
      // already processed 
      continue; 
     } 
     abbr.insertAdjacentHTML('beforeend', '<span class="full-timestamp">' + 
      new Date(abbr.dataset.utime * 1000).toLocaleString() + '</span>'); 
    } 
} 

的代碼使用簡單MutationObserver包裝setMutationHandler。