javascript SocialHistory 检查访问者是否访问过某站点


































































































































































































































































































































































































































window.onload = function() {
    var sl = new SocialHistory();
    alert(sl.doesVisit("www.jb51.net"));
}
如果用户曾经使用过www.jb51.net，那么该函数就会返回真，否则返回假。

其实原理并不复杂，它利用了链接的 a:visited 伪类的属性。首先在页面上生成一个iframe，并在这个iframe中设置 a 和 a:visited 为不同的样式。然后将网站的链接插入到 iframe 中。浏览器就会根据用户的访问历史，为访问过的链接设置 a:visited 的样式。最后再获得链接的最终样式，如果是 a:visited，就可以认为用户访问过该网站了。具体的实现方式可以参考源代码。

这个脚本主要用于显示社会性书签的图标，可以恰到好处地显示用户所使用的网站。但我担心，这样的做法是不是有盗取用户隐私之嫌？虽然这个方法只能判断用户有无访问特定的网站，并不能无限制地得到所有访问历史。

/*

* Social Limit - Only the social you care about.
*
* Enables your site to know which social bookmarking badges to display to your
* visitors. It tells you all social sites the user has gone to, or you can
* query for a specific one.
*
* For example:
*
* var sl = SocialHistory();
* alert( sl.doesVisit("Digg") ); // Returns true/false, -1 if unknown.
* var listOfVisitedSites = sl.visitedSites();
* var checkedSites = sl.checkedSites();
*
* If you want to add more sites to check, you can pass that in as a dictionary
* to History:
*
* var more = { "Humanized": "http://humanized.com",
* "Azarask.in": ["http://azarask.in", "http://azarask.in/blog"]
* };
* var sl = SocialHistory(more);
* alert( sl.doesVisit("Humanized") );
*
* For a list of built-in sites, see the sites variable below.
*
* Copyright (c) 2008 Aza Raskin (http://azarask.in/blog)
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
*/

var SocialHistory = function( moreSites ){

var sites = {
"Digg": ["http://digg.com", "http://digg.com/login"],
"Reddit": ["http://reddit.com", "http://reddit.com/new/", "http://reddit.com/controversial/", "http://reddit.com/top/", "http://reddit.com/r/reddit.com/", "http://reddit.com/r/programming/"],
"StumbleUpon": ["http://stumbleupon.com"],
"Yahoo Buzz": ["http://buzz.yahoo.com"],
"Facebook": ["http://facebook.com/home.php", "http://facebook.com", "https://login.facebook.com/login.php"],
"Del.icio.us": ["https://secure.del.icio.us/login", "http://del.icio.us/"],
"MySpace": ["http://www.myspace.com/"],
"Technorati": ["http://www.technorati.com"],
"Newsvine": ["https://www.newsvine.com", "https://www.newsvine.com/_tools/user/login"],
"Songza": ["http://songza.com"],
"Slashdot": ["http://slashdot.org/"],
"Ma.gnolia": ["http://ma.gnolia.com/"],
"Blinklist": ["http://www.blinklist.com"],
"Furl": ["http://furl.net", "http://furl.net/members/login"],
"Mister Wong": ["http://www.mister-wong.com"],
"Current": ["http://current.com", "http://current.com/login.html"],
"Menaeme": ["http://meneame.net", "http://meneame.net/login.php"],
"Oknotizie": ["http://oknotizie.alice.it", "http://oknotizie.alice.it/login.html.php"],
"Diigo": ["http://www.diigo.com/", "https://secure.diigo.com/sign-in"],
"Funp": ["http://funp.com", "http://funp.com/account/loginpage.php"],
"Blogmarks": ["http://blogmarks.net"],
"Yahoo Bookmarks": ["http://bookmarks.yahoo.com"],
"Xanga": ["http://xanga.com"],
"Blogger": ["http://blogger.com"],
"Last.fm": ["http://www.last.fm/", "https://www.last.fm/login/"],
"N4G": ["http://www.n4g.com"],
"Faves": ["http://faves.com", "http://faves.com/home", "https://secure.faves.com/signIn"],
"Simpy": ["http://www.simpy.com", "http://www.simpy.com/login"],
"Yigg": ["http://www.yigg.de"],
"Kirtsy": ["http://www.kirtsy.com", "http://www.kirtsy.com/login.php"],
"Fark": ["http://www.fark.com", "http://cgi.fark.com/cgi/fark/users.pl?self=1"],
"Mixx": ["https://www.mixx.com/login/dual", "http://www.mixx.com"],
"Google Bookmarks": ["http://www.google.com/bookmarks", "http://www.google.com/ig/add?moduleurl=bookmarks.xml&hl=en"],
"Subbmitt": ["http://subbmitt.com/"]
};

for( var site in moreSites ) {
// If we don't have the site, create the URL list.
if( typeof( sites[site] ) == "undefined" ) sites[site] = [];

// If the value is string, just push that onto the URL list.
if( typeof( moreSites[site] ) == "string" )
sites[site].push( moreSites[site] );
else
sites[site] = sites[site].concat( moreSites[site] );
}

var visited = {};

function getStyle(el, scopeDoc,styleProp) {
if (el.currentStyle)
var y = el.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = scopeDoc.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
return y;
}

function remove( el ) {
el.parentNode.removeChild( el );
}

// Code inspired by:
// bindzus.wordpress.com/2007/12/24/adding-dynamic-contents-to-iframes
function createIframe() {
var iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.visibility = "hidden";

document.body.appendChild(iframe);

// Firefox, Opera
if(iframe.contentDocument) iframe.doc = iframe.contentDocument;
// Internet Explorer
else if(iframe.contentWindow) iframe.doc = iframe.contentWindow.document;

// Magic: Force creation of the body (which is null by default in IE).
// Also force the styles of visited/not-visted links.
iframe.doc.open();
iframe.doc.write('<style>');
iframe.doc.write("a{color: #000000; display:none;}");
iframe.doc.write("a:visited {color: #FF0000; display:inline;}");
iframe.doc.write('</style>');
iframe.doc.close();

// Return the iframe: iframe.doc contains the iframe.
return iframe;
}

var iframe = createIframe();

function embedLinkInIframe( href, text ) {
var a = iframe.doc.createElement("a");
a.href = href;
a.innerHTML = site;
iframe.doc.body.appendChild( a );
}

for( var site in sites ) {
var urls = sites[site];
for( var i=0; i<urls.length; i++ ) {
// You have to create elements in the scope of the iframe for IE.
embedLinkInIframe( urls[i], site );

// Automatically try variations of the URLS with and without the "www"
if( urls[i].match(/www\./) ){
var sansWWW = urls[i].replace(/www\./, "");
embedLinkInIframe( sansWWW, site );
} else {
// 2 = 1 for length of string + 1 for slice offset
var httpLen = urls[i].indexOf("//") + 2;
var withWWW = urls[i].substring(0, httpLen ) + "www." + urls[i].substring( httpLen );
embedLinkInIframe( withWWW, site );
}

}
}

var links = iframe.doc.body.childNodes;
for( var i=0; i<links.length; i++) {
// Handle both Firefox/Safari, and IE (respectively)
var displayValue = getStyle(links[i], iframe.doc, "display");
var didVisit = displayValue != "none";

if( didVisit ){
visited[ links[i].innerHTML ] = true;
}
}
remove( iframe );

return new (function(){
var usedSites = [];
for( var site in visited ){
usedSites.push( site );
}

// Return an array of visited sites.
this.visitedSites = function() {
return usedSites;
}

// Return true/false. If we didn't check the site, return -1.
this.doesVisit = function( site ) {
if( typeof( sites[site] ) == "undefined" )
return -1;
return typeof( visited[site] ) != "undefined";
}

var checkedSites = [];
for( var site in sites ){
checkedSites.push( site );
}
// Return a list of the sites checked.
this.checkedSites = function(){
return checkedSites;
}
})();
}

赞 (0)

相关推荐

  • javascript history对象详解

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后退和前进.本文将详细介绍BOM中的history对象 length history.length属性保存着历史记录的URL数量.初始时,该值为1.如果当前窗口先后访问了三个网址,history.length属性等于3 由于IE10+浏览器在初始时返回2,存在兼容性问题,所以该值并不常用 histor

  • JavaScript的History API使搜索引擎抓取AJAX内容

    JavaScript的History API使搜索引擎抓取AJAX内容

    大家在浏览Facebook的相册时有没有发现,页面局部刷新的同时地址栏的地址也改变了,而且不是hash的方式.它使用的就是HTML5 history新增的几个API,作为window的一个全局变量,在HTML4的时代history已不是什么新鲜的事物了.我们经常使用的就有 history.back()以及history.go() . 我一直以为没有办法做到,直到前两天看到了Discourse创始人之一的Robin Ward的解决方法,不禁拍案叫绝. Discourse是一个论坛程序,严重依赖Aj

  • JavaScript编程中window的location与history对象详解

    Window Location window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面. window.location 对象在编写时可不使用 window 这个前缀. 一些例子: 一些实例: location.hostname 返回 web 主机的域名 location.pathname 返回当前页面的路径和文件名 location.port 返回 web 主机的端口 (80 或 443) location.protocol 返回所使用的 web 协

  • js判断当页面无法回退时关闭网页否则就history.go(-1)

    在做一个Web项目时遇到一个需求,当页面没有前驱历史记录时(就是当前为新弹出的页面,没法做goback操作即history.go(-1)),点击返回按钮时直接关闭页面,否则就退回到前一页. 遇到的问题就是如何判断 是否有history可以回退,这个非常麻烦,因为没有这样的函数直接能获取到,只能通过history.length这个变量做变通的处理,但是对于IE,和非IE的length的返回值不同,ie: history.length=0, 非IE的为1,因此写了一个函数实现前面所需求的这个功能.分

  • JavaScript入门教程(7) History历史对象

    鉴于安全性的需要,该对象收到很多限制,现在只剩下下列属性和方法.History历史对象有length这个属性,列出历史的项数.JavaScript 所能管到的历史被限制在用浏览器的"前进""后退"键可以去到的范围.本属性返回的是"前进"和"后退"两个按键之下包含的地址数的和. History历史对象并有以下方法 back() 后退,跟按下"后退"键是等效的. forward() 前进,跟按下"前进

  • javascript history对象(历史记录)使用方法(实现浏览器前进后退)

    window.history对象在编写时可不使用 window 这个前缀.为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制. 方法: history.back() - 加载历史列表中的前一个URL,这与在浏览器中点击前进按钮是相同的history.forward() - 加载历史列表中的下一个URL,这与在浏览器中点击前进按钮是相同的 实例: 复制代码 代码如下: <html><button name="back" value="后退&

  • JavaScript中的History历史对象

    JavaScript中的History历史对象包含了用户已浏览的 URL 的信息,是指历史对象指浏览器的浏览历史.鉴于安全性的需要,该对象收到很多限制,现在只剩下下列属性和方法.History历史对象有length这个属性,列出历史的项数.JavaScript 所能管到的历史被限制在用浏览器的"前进""后退"键可以去到的范围.本属性返回的是"前进"和"后退"两个按键之下包含的地址数的和. History历史对象并有以下方法 b

  • js history对象简单实现返回和前进

    返回和前进用到的是DOM中的history对象: 返回: 复制代码 代码如下: <a href="javascript:history.go(-1)">返回</a> //相当于调用history对象的back()方法: 前进: 复制代码 代码如下: <a href="javascript:history.go(1)">前进</a> //相当于调用history对象的forword()方法:

  • javascript:history.go()和History.back()的区别及应用

    复制代码 代码如下: <input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input t

  • javascript SocialHistory 检查访问者是否访问过某站点

    window.onload = function() {     var sl = new SocialHistory();     alert(sl.doesVisit("www.jb51.net")); } 如果用户曾经使用过www.jb51.net,那么该函数就会返回真,否则返回假. 其实原理并不复杂,它利用了链接的 a:visited 伪类的属性.首先在页面上生成一个iframe,并在这个iframe中设置 a 和 a:visited 为不同的样式.然后将网站的链接插入到 if

  • JavaScript中检查对象property的存在性方法介绍

    JavaScript中检查对象property的存在性方法介绍

    在JavaScript中,可以用四种方法来检查某个对象o是否拥有property x: 1."x" in o.in操作符可用于检查对象o中是否有x这个property.x可以是对象自身的(Own Property),也可以是从原型对象中继承而来的:x可以是enumerable的property,也可以是非enumerable的property. 2.o.x.可以通过访问o.x语句,判断其结果是否为undefined来确认x是否存在,其作用范围与in操作符相同.与in操作符不同的是:如果

  • javascript对象的创建和访问

    JavaScript,很少能让人想到它面向对象的特性,甚至有人说它不是面向对象的语言,因为它没有类.没错, JavaScript 真的没有类,但 JavaScript 是面向对象的语言. JavaScript 只有对象,对象就是对象,不是类的实例. 因为绝大多数面向对象语言中的对象都是基于类的,所以经常有人混淆类的实例与对象的概念.对象就是类的实例,这在大多数语言中都没错,但在 JavaScript 中却不适用.JavaScript 中的对象是基于原型的. 创建和访问 JavaScript 中的

  • javascript批量检查当图片不存在时则显示默认图片的代码

    这个是批量的检查,比较好的思路 在不存在图片时显示默认图片练习 by 阿会楠 img{ border:1px solid #cccccc; width:100px; height:50px; } var imgs = document.images; for(var i = 0;i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 用Javascript判断图片是否存在,不存在则显示默认图片的代码可以参考下面的http://www.jb51.net/article/8796.htm

  • 网络之美 JavaScript中Get和Set访问器的实现代码

    网络之美 JavaScript中Get和Set访问器的实现代码

    标准的Get和Set访问器的实现 复制代码 代码如下: function Field(val){ this.value = val; } Field.prototype = { get value(){ return this._value; }, set value(val){ this._value = val; } }; var field = new Field("test"); field.value="test2"; //field.value will

  • JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法

    每个人都讨厌广告.看电视.看电影.看优酷.看网页时,对满天飞的广告也是深恶痛绝.广告是一个不招人喜欢的东西.但是,对一个中小网站站长/博客主来说,广告几乎是唯一的能成支持网站/博客正常运转的资金来源.如果一个博客主,只是无私发布稿件,能坚持几年的,很少.大多数慢慢失去了热情. 火狐浏览器和谷歌浏览器里都有能够屏蔽页面给广告的插件,最有名的是AdBlock和AdBlock Plus.前几天,我做一个统计,看看浏览网站的用户中有多少人使用了AdBlock插件,发现这个数目竟然有总浏览人数的1/5.

  • JavaScript Cookie显示用户上次访问的时间和次数

    httml代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  • javascript 动态生成私有变量访问器

    复制代码 代码如下: //创建一个新的用户对象,接受一个有许多属性的对象作为参数 function User(properties) { //遍历该对象的所有属性,并保证其作用域正确 for(var i in properties){ (function(which){ var p=i; //创建此属性的一个新的读取器(getter) which["get"+p]=function(){ return properties[p]; }; //创建此属性的一个新的设置器(setter)

  • JavaScript进阶教程(第二课)第1/3页

    今天我们将学习一项很有用而且很有趣的内容:cookies - 这是用来记录访问过你的网页的人的信息.利用Cookies你能记录访问者的姓名,并且在该访问者再次访问你的站点时向他发出热情的欢迎信息.你还可以利用cookie记忆用户端的特点 - 如果访问者的所接入的网线的速度慢,cookie可以自动告诉你在给其发送网页的时候只发送尽可能少的图片内容. 只要你在合理的范围内使用cookies(不要用它探询用户的个人隐私),cookies还是相当实用得.所以我要向你们介绍cookies的工作原理,但是在

  • javascript设计模式 – 访问者模式原理与用法实例分析

    本文实例讲述了javascript设计模式 – 访问者模式原理与用法.分享给大家供大家参考,具体如下: 介绍:访问者模式比较复杂,它包含访问者和被访问元素两个主要组成部分,这些被访问的元素通常具有不同的类型,且不同的访问者可以对他们进行不同的访问操作.访问者模式的主要目的是将数据结构与数据操作相分离. 定义:提供一个作用于某对象结构中的个元素的操作表示,它使得可以再不改变各元素的类的前提下定义作用于这些元素的新操作.访问者模式是一种对象行为型模式 场景:使用PC结构demo来解释下访问者模式 示

随机推荐