Use jQuery to Select Visited Links

前端 未结 3 966
一个人的身影
一个人的身影 2020-11-27 22:34

I\'m trying to select all visited links via jQuery. Here is the HTML


                      
相关标签:
3条回答
  • 2020-11-27 23:19

    I found workaround based on LocalStorage on Nevyan's Blog: Mark visited links using JavaScript and localStorage

    He proposed clean JavaScript code to store links clicked by page user in LocalStorage and add class "visited" to parent of an <a> element:

    function check_visited_links() {
        var visited_links = JSON.parse(localStorage.getItem('visited_links')) || [];
        var links = document.getElementsByTagName('a');
        for (var i = 0; i < links.length; i++) {
            var that = links[i];
            that.onclick = function() {
                var clicked_url = this.href;
                if (visited_links.indexOf(clicked_url) == -1) {
                    visited_links.push(clicked_url);
                    localStorage.setItem('visited_links', JSON.stringify(visited_links));
                }
            }
            if (visited_links.indexOf(that.href) !== -1) {
                that.parentNode.className += ' visited';
            }
        }
    }
    

    I don't know if it's safer than :visited approach though.

    0 讨论(0)
  • 2020-11-27 23:23

    enter code here`It's not supported by javascript as I also try to find methods to collect a:visited links data to hide the node visited.

    some reference: Privacy and the :visited selector - CSS | MDN

    If all you care about is styling, you should be able to achieve it through CSS, but through what is displayed on screen should be the only way to observe it being visited.

    I do this way in a userscript for Greasemonkey to let those sites without a:visited style display those already visited links.

    // ==UserScript==
    // @description    ADD a:visited for CSS
    // @include        *annalscts.com*
    // @include        *thejns.org*
    // @include        *turkishneurosurgery.org.tr*
    // @include        *nature.com*
    // @include        *academic.oup.com*
    // @include        *sagepub.com*
    // @grant          GM_addStyle
    // ==/UserScript==
    GM_addStyle('a:visited {color:#EE5665 !important}');
    

    For collect the data to local I use the Greasemonkey API

    GM_setValue 
    GM_getValue
    

    I just watched tutorials on Youtube for the API and try to write into the userscript

    Greasemonkey API: Values just search for this title on Youtube.

    Written Tutorial: http://nulleffort.com/greasemonkey-api-values/

    Greasemonkey Docs: https://wiki.greasespot.net/Greasemonkey_Manual:API

    some parts of my userscript

    //Firstly, var the ordinary variable preVisitedLinks and assigning to memory variable visitedLinks (At first the value should be undefined)
    var preVisitedLinks = GM_getValue("visitedLinks");
    unsafeWindow.aclick = function(tlink){
        window.open(tlink, '_blank', 'toolbar=yes,scrollbars=yes,resizable=yes,top=10,left=10,width=10,height=10'); // click a button added and get the link visited in my script 
        //If the ordinary variable preVisitedLinks is undefined (First time running the script)
        if(preVisitedLinks.includes('undefined')){
            GM_setValue('preVisitedLinks', '|' + tlink.replace('http://paper.pubmed.cn/',''));
        }
        //If the ordinary variable preVisitedLinks is not undefined, continue to add each new string collect
        else{
            GM_setValue('preVisitedLinks', preVisitedLinks + '|' + tlink.replace('http://paper.pubmed.cn/',''));
        }
        //The ordinary variable preVisitedLinks assigning to memory variable visitedLinks value. The magic is the variable name the same.
        preVisitedLinks = GM_getValue("preVisitedLinks");
        if(preVisitedLinks.length > 27500){
            preVisitedLinks = preVisitedLinks.substr(preVisitedLinks.length - 27500);
        }
        //The memory variable visitedLinks value assigning to the ordinary variable preVisitedLinks value
        GM_setValue('visitedLinks',preVisitedLinks);
        console.info(preVisitedLinks);
    };
    

    And in some place I use the string to detect the visited links code

    if(preVisitedLinks.includes(trs[i].querySelectorAll('li')[0].querySelector('a').href.replace('http://xxx.xxxx.com/',''))){
            trs[i].remove();
        }
    
    0 讨论(0)
  • 2020-11-27 23:34

    The given approach has been disabled for security reasons.

    As it is possible to retrieve a visitor's history by checking for visited links, certain measures have been taken by browser vendors to prevent this.

    Source: Mozilla Foundation Blog.

    Checked in Chrome and FF - both don't support $("a:visited") any longer.

    0 讨论(0)
提交回复
热议问题