javascript 如何检测页面上已访问和未访问的链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7290959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I detect visited and unvisited links on a page?
提问by Chetan
My aim is to detect the unvisited links on a webpage and then create a greasemonkey script to click on those links. By unvisited links here I mean the links which are not opened by me. Since I can see all the browser provide capability to change the color of visited and unvisited link is it possible to detect these links in any manner. While searching I came upon this link: http://www.mozdev.org/pipermail/greasemonkey/2005-November/006821.htmlbut someone here told me that this is no longer possible. Please help.
我的目标是检测网页上未访问的链接，然后创建一个greasemonkey 脚本来点击这些链接。此处未访问的链接是指我未打开的链接。由于我可以看到所有浏览器都提供了更改已访问和未访问链接颜色的功能，因此有可能以任何方式检测这些链接。在搜索时我发现了这个链接：http: //www.mozdev.org/pipermail/greasemonkey/2005-November/006821.html但这里有人告诉我这不再可能。请帮忙。
回答by Brock Adams
Correct, it is not possible for javascript to detect if a link is visited in either Firefox or Chrome -- which are the only 2 browsers applicable in this Greasemonkeycontext.
正确，javascript 无法检测是否在 Firefox 或 Chrome 中访问了链接——这是在此Greasemonkey上下文中唯一适用的 2 种浏览器。
That is because Firefox and Chrome take security and privacy seriously. From the CSS2 spec:
这是因为 Firefox 和 Chrome 非常重视安全和隐私。来自CSS2 规范：
Note. It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent.
UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently. See [P3P] for more information about handling privacy.
笔记。样式表作者可能会滥用 :link 和 :visited 伪类来确定用户在未经用户同意的情况下访问了哪些站点。
因此，UA 可能会将所有链接视为未访问链接，或实施其他措施以保护用户隐私，同时以不同方式呈现访问过和未访问过的链接。有关处理隐私的更多信息，请参阅 [P3P]。
See also, "Privacy and the :visited selector"
You can see a demo showing that secure-ish browsers will not let you sniff visited links at jsfiddle.net/n8F9U.
另请参阅“隐私和 :visited 选择器”
您可以在jsfiddle.net/n8F9U 上看到一个演示，该演示表明安全浏览器不会让您嗅探访问过的链接。
For your specific situation, because you are visiting a page and keeping it open, you can help a script keep track of what links were visited. It's not fool-proof, but I believe it will do what you've asked for.
对于您的特定情况，因为您正在访问一个页面并保持打开状态，您可以帮助脚本跟踪访问了哪些链接。这不是万无一失的，但我相信它会满足您的要求。
First, see the script in actionby doing the following:
首先，通过执行以下操作查看正在运行的脚本：
- Install the script, as is.
- Browse to the test page, jsbin.com/eledog.
The test page adds a new link, every time it is reloaded or refreshed. The GM script adds 2 buttons to the pages it runs on. A "start/Stop" button in the upper left and a "Clear" button in the lower right.
When you press the "Start" button, it does the following:
- All existing links on the page are logged as "visited".
- It starts a timer (default setting: 3 seconds), when the timer goes off, it reloads the page.
- Each time the page reloads, it opens any new links and kicks off a new reload-timer.
- Press the "Stop" button to stop the reloads, the list of visited links is preserved.
The "Clear" button, erases the list of visited pages.
WARNING: If you press "Clear" while the refresh loop is active, then the next time the page reloads, alllinks will be opened in new tabs.
- 按原样安装脚本。
- 浏览到测试页面jsbin.com/eledog。
每次重新加载或刷新时，测试页面都会添加一个新链接。 GM 脚本向其运行的页面添加了 2 个按钮。左上角的“开始/停止”按钮和右下角的“清除”按钮。
当您按下“开始”按钮时，它会执行以下操作：
- 页面上的所有现有链接都记录为“已访问”。
- 它启动一个计时器（默认设置：3 秒），当计时器关闭时，它会重新加载页面。
- 每次页面重新加载时，它都会打开任何新链接并启动新的重新加载计时器。
- 按“停止”按钮停止重新加载，访问的链接列表被保留。
“清除”按钮清除访问过的页面列表。
警告：如果在刷新循环处于活动状态时按“清除”，则下次页面重新加载时，所有链接都将在新选项卡中打开。
Next, to use the script on your site...
接下来，要在您的网站上使用脚本...
Carefully read the comments in the script, you will have to change the @include, @exclude, and selectorStrvalues to match the site you are using.
仔细阅读剧本的意见，你将不得不改变@include，@exclude和selectorStr值，您正在使用的网站相匹配。
For best results, disable any "Reload Every" add-ons, or "Autoupdate" options.
为获得最佳效果，请禁用任何“重新加载每个”附加组件或“自动更新”选项。
Important notes:
重要笔记：
The script has to use permanent storage to to track the links.
The options are: cookies,sessionStorage,localStorage,globalStorage,GM_setValue(), andIndexedDB.These all have drawbacks, and in this case (single site, potentially huge number of links, multiple sessions),
localStorageis the best choice (IndexedDBmight be, but it is still too unstable -- causing frequent FF crashes on my machine).This means that links can only be tracked on a per-site basis, and that "security", "privacy", or "cleaner" utilities can block or erase the list of visited links. (Just like, clearing the browser's history will reset any CSS styling for visited links.)
The script is Firefox-only, for now. It should not work on Chrome, even with Tampermonkey installed, without a little re-engineering.
该脚本必须使用永久存储来跟踪链接。
选项有：饼干，sessionStorage，localStorage，globalStorage，GM_setValue()，和IndexedDB。这些都有缺点，在这种情况下（单个站点，可能有大量链接，多个会话），
localStorage是最好的选择（IndexedDB可能是，但它仍然太不稳定——导致我的机器上频繁出现 FF 崩溃）。这意味着只能在每个站点的基础上跟踪链接，并且“安全”、“隐私”或“更清洁”的实用程序可以阻止或删除访问过的链接列表。（就像，清除浏览器的历史记录将重置访问过的链接的任何 CSS 样式。）
该脚本目前仅适用于 Firefox。它不应该在 Chrome 上工作，即使安装了 Tampermonkey，没有一点重新设计。
The script:
剧本：
/*******************************************************************************
** This script:
** 1) Keeps track of which links have been clicked.
** 2) Refreshes the page at regular intervals to check for new links.
** 3) If new links are found, opens those links in a new tab.
**
** To Set Up:
** 1) Carefully choose and specify `selectorStr` based on the particulars
** of the target page(s).
** The selector string uses any valid jQuery syntax.
** 2) Set the @include, and/or, @exclude, and/or @match directives as
** appropriate for the target site.
** 3) Turn any "Auto update" features off. Likewise, do not use any
** "Reload Every" addons. This script will handle reloads/refreshes.
**
** To Use:
** The script will place 2 buttons on the page: A "Start/Stop" button in
** the upper left and a "Clear" button in the lower left.
**
** Press the "Start" button to start the script reloading the page and
** opening any new links.
** When the button is pressed, it is assumed that any existing links have
** been visited.
**
** Press the "Stop" button to halt the reloading and link opening.
**
** The "Clear" button erases the list of visited links -- which might
** otherwise be stored forever.
**
** Methodology:
** Uses localStorage to track state-machine state, and to keep a
** persistent list of visited links.
**
** Implemented with jQuery and some GM_ functions.
**
** For now, this script is Firefox-only. It probably will not work on
** Chrome, even with Tampermonkey.
*/
// ==UserScript==
// @name _New link / visited link, tracker and opener
// @include http://jsbin.com/*
// @exclude /\/edit\b/
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
//--- Key control/setup variables:
var refreshDelay = 3000; //-- milliseconds.
var selectorStr = 'ul.topicList a.topicTitle';
//--- Add the control buttons.
$("body") .append ( '<div id="GM_StartStopBtn" class="GM_ControlWrap">'
+ '<button>Start checking for new links.</button></div>'
)
.append ( '<div id="GM_ClearVisitListBtn" class="GM_ControlWrap">'
+ '<button>Clear the list of visited links.</button></div>'
);
$('div.GM_ControlWrap').hover (
function () { $(this).stop (true, false).fadeTo ( 50, 1); },
function () { $(this).stop (true, false).fadeTo (900, 0.8); }// Coordinate with CSS.
);
//--- Initialize the link-handler object, but wait until the load event.
var stateMachine;
window.addEventListener ("load", function () {
stateMachine = new GM_LinkTrack ( selectorStr,
'#GM_StartStopBtn button',
'#GM_ClearVisitListBtn button',
refreshDelay
);
/*--- Display the current number of visited links.
We only update once per page load here.
*/
var numLinks = stateMachine.GetVisitedLinkCount ();
$("body").append ('<p>The page opened with ' + numLinks + ' visited links.</p>');
},
false
);
/*--- The link and state tracker object.
Public methods:
OpenAllNewLinks ()
StartStopBtnHandler ()
ClearVisitedLinkList ()
StartRefreshTimer ();
StopRefreshTimer ();
SetAllCurrentLinksToVisited ()
GetVisitedLinkCount ()
*/
function GM_LinkTrack (selectorStr, startBtnSel, clearBtnSel, refreshDelay)
{
var visitedLinkArry = [];
var numVisitedLinks = 0;
var refreshTimer = null;
var startTxt = 'Start checking for new links.';
var stopTxt = 'Stop checking links and reloading.';
//--- Get visited link-list from storage.
for (var J = localStorage.length - 1; J >= 0; --J) {
var itemName = localStorage.key (J);
if (/^Visited_\d+$/i.test (itemName) ) {
visitedLinkArry.push (localStorage[itemName] );
numVisitedLinks++;
}
}
function LinkIsNew (href) {
/*--- If the link is new, adds it to the list and returns true.
Otherwise returns false.
*/
if (visitedLinkArry.indexOf (href) == -1) {
visitedLinkArry.push (href);
var itemName = 'Visited_' + numVisitedLinks;
localStorage.setItem (itemName, href);
numVisitedLinks++;
return true;
}
return false;
}
//--- For each new link, open it in a separate tab.
this.OpenAllNewLinks = function ()
{
$(selectorStr).each ( function () {
if (LinkIsNew (this.href) ) {
GM_openInTab (this.href);
}
} );
};
this.StartRefreshTimer = function () {
if (typeof refreshTimer != "number") {
refreshTimer = setTimeout ( function() {
window.location.reload ();
},
refreshDelay
);
}
};
this.StopRefreshTimer = function () {
if (typeof refreshTimer == "number") {
clearTimeout (refreshTimer);
refreshTimer = null;
}
};
this.SetAllCurrentLinksToVisited = function () {
$(selectorStr).each ( function () {
LinkIsNew (this.href);
} );
};
this.GetVisitedLinkCount = function () {
return numVisitedLinks;
};
var context = this; //-- This seems clearer than using `.bind(this)`.
this.StartStopBtnHandler = function (zEvent) {
if (inRefreshCycle) {
//--- "Stop" pressed. Stop searching for new links.
$(startBtnSel).text (startTxt);
context.StopRefreshTimer ();
localStorage.setItem ('inRefreshCycle', '0'); //Set false.
}
else {
//--- "Start" pressed. Start searching for new links.
$(startBtnSel).text (stopTxt);
localStorage.setItem ('inRefreshCycle', '1'); //Set true.
context.SetAllCurrentLinksToVisited ();
context.StartRefreshTimer ();
}
inRefreshCycle ^= true; //-- Toggle value.
};
this.ClearVisitedLinkList = function (zEvent) {
numVisitedLinks = 0;
for (var J = localStorage.length - 1; J >= 0; --J) {
var itemName = localStorage.key (J);
if (/^Visited_\d+$/i.test (itemName) ) {
localStorage.removeItem (itemName);
}
}
};
//--- Activate the buttons.
$(startBtnSel).click (this.StartStopBtnHandler);
$(clearBtnSel).click (this.ClearVisitedLinkList);
//--- Determine state. Are we running the refresh cycle now?
var inRefreshCycle = parseInt (localStorage.inRefreshCycle, 10) || 0;
if (inRefreshCycle) {
$(startBtnSel).text (stopTxt); //-- Change the btn lable to "Stop".
this.OpenAllNewLinks ();
this.StartRefreshTimer ();
}
}
//--- Style the control buttons.
GM_addStyle ( " \
.GM_ControlWrap { \
opacity: 0.8; /*Coordinate with hover func. */ \
background: pink; \
position: fixed; \
padding: 0.6ex; \
z-index: 666666; \
} \
.GM_ControlWrap button { \
padding: 0.2ex 0.5ex; \
border-radius: 1em; \
box-shadow: 3px 3px 3px gray; \
cursor: pointer; \
} \
.GM_ControlWrap button:hover { \
color: red; \
} \
#GM_StartStopBtn { \
top: 0; \
left: 0; \
} \
#GM_ClearVisitListBtn { \
bottom: 0; \
right: 0; \
} \
" );
回答by rinchik
You can parse all links on the page and and get their CSS color property. If a color of the link is a match to the color of unvisited link you defined in CSS the this link is unvisited.
您可以解析页面上的所有链接并获取它们的 CSS 颜色属性。如果链接的颜色与您在 CSS 中定义的未访问链接的颜色匹配，则此链接未访问。
This kind of technique usually used to determine all visited links. This is sort of a security breach that allows you to determine if user visited particular web-site. Usually used by sleazy marketers.
这种技术通常用于确定所有访问过的链接。这是一种安全漏洞，可让您确定用户是否访问了特定网站。通常由低俗的营销人员使用。
This kind of tricks usually classifies as a "browser's history manipulation tricks".
这种伎俩通常被归类为“浏览器的历史操纵技巧”。
More info with code: http://www.stevenyork.com/tutorial/getting_browser_history_using_javascript
更多代码信息：http: //www.stevenyork.com/tutorial/getting_browser_history_using_javascript
