Javascript/jQuery 如何判断页面已被访问过?

一个奇葩的需求!

因为是个人脚本需求,发问前未考虑到“隐私”问题。
感谢 unofficial 与 rainyjune 的详细解答。

关于 visited 隐私问题的相关解释:https://developer.mozilla.org…


补充说明2:其实只是想找一个确定“页面”或“超链接”的“已访问”状态,而不借助任何的存储!


如何在不读写LocalStorage、IndexedDB、Cookie之类的情况下,如何判断一个网页在打开时是已被访问过?

或如何得知一个超链接的已访问状态?

补充说明:我并不是要设置其CSS样式!


补充说明2:

这种需求还真没遇见过,不过你提到了用js来处理,给你一个思路,给url添加hash。


如果你是要在浏览器地址栏中输入url,然后想知道是否之前就访问过,不记录状态,我想应该是不能实现的,如果有方案,我也可以了解一下。

仔细了解了提问者的需求,你这样做会侵犯用户隐私。

当前主流浏览器不允许用 JavaScript 判断页面中的链接是否已被访问,主要是用户安全和隐私方面的考虑。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 users consent.

了解更多: https://developer.mozilla.org…

以前写过一个方法,可以参见:如何判断用户是否访问过某个网址。

基本原理是浏览器在渲染访问过的链接时,样式会有所不同,可以检测渲染时间差,从而得知用户是否访问过指定链接。

当然是用localStorage cookie 这些存储机制了, 你要是说不用这些,那不是扯蛋吗。

有点奇怪的需求

这样看看能否符合你的需求,在你的页面中隐藏一个极小的图片,然后JS判断这个图片是否在缓存中,在的话就代表已被访问,不在自然就没有被访问了。

var url = "./a.png";
var img = new Image;
img.src = url;
ifimg.complete || img.width { console.log已经访问过!!!
}

如果拦截所有的url请求,并获取保存url和访问用户(或ip),如果存在了当前ip对该url的数据,即视为访问过。也许可行。。

如果不借助后端,后端可以记录ip,也不借助前端的任何存储,这是不可能的

你想,访问过或者没有访问过,本质上这是不是一个打标记的问题,不管是打0或1,在判断的时候是不是总得取这个标记值看一下,你不用任何存储,请问这个标记放在哪

利用 a:visited css 访问过的链接样式区分。

<style type="text/css">
.nealnote:link { color: blue;
}
.nealnote:visited { color: red;
}
.nealnote:hover { color: blue;
}
.nealnote:actve { color: blue;
}
</style>
<a class="nealnote" href="https://segmentfault.com/q/1010000007544678">https://segmentfault.com/q/1010000007544678</a>
<a class="nealnote" href="https://www.baidu.com/?q=visited">https://www.baidu.com/?q=visited</a>

访问过的链接的colorred,未访问过的链接colorblue

这个要求太奇葩了。Cookie和URL加Hash都是比较靠谱的方案,为什么不用?纯靠JS没有服务器帮助是比较困难的。
浏览器主要是用户安全隐私考虑,不允许访问CSS的visited伪类。的确是这样。但是有一个变通的办法。
你可以给对应的visited样式加上特殊颜色(肉眼看不出的细微颜色差别)或者字体大小,行高(一个像素差别啥的)什么的,然后通过js获取其颜色或者父标记的尺寸来确定是不是visited的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注