【思路与简介】Hook或改写Javascript脚本的函数,以友言组件为例,发布评论前获取评星和内容

友言是一个第三方的社会化网络评论组件,以JS脚本形式,可用于博客、网站等一些需要用户交流、分享、评论的地方

这类工具的好处不言而喻,可缓解对本地数据库的压力,用户可使用其他社交网站的帐号登录,评论的同时分享本页链接,扩大网站影响力

 

我在几个月前注册并测试了友言的评论分享功能,发现有很多的不足,比如其只能用当前URL的host和路径来自动生成评论页,如果某条内容翻页,致使URL的参数发生变化,就会加载新的评论,而无法整合评论内容

这种致命缺点导致我并没有仔细再研究和使用友言评论,但最新的友言2.0版升级,以及修复了这些问题,它采用一个JS配置对象,来让友言识别当前页面属于哪个评论,并且也可以整合子域名和主域名之间的评论,非常方便

 

虽然现在的友言已经非常不错,不过我依然不满足

我需要获取更多的用户信息,到我自己的主机数据库中,但友言并没有提供API供我们使用

比如我希望在用户提交信息的时候,能够获取到用户为本页打的分(评星),以及用户所提交的评论内容,甚至,我想在前端屏蔽用户的提交行为,这些都是不可完成的

鉴于此,我研究了一下友言的代码结构,并尝试用JS修改了友言的部分代码

 

首先要做的,将友言JS调用的 async="" 属性去掉,停止异步调用,这样可以按顺序来执行JS脚本,才能让我们的Hook代码发挥作用

先找到提交代码,友言使用 UYAN.addCmt 这个函数来提交用户评论,我们可以使用下面的代码,来重写它

UYAN.addCmt2 = UYAN.addCmt;
UYAN.addCmt = function (e,a,b){
    alert(UYAN.vStar);
    alert(document.getElementById("uyan_cmt_cnt").innerHTML);
    UYAN.addCmt2(e,a,b);
}

先创建一个 addCmt2 来备份原来的函数

然后再重写 addCmt 函数,用 UYAN.vStar 获取用户评星值,再获取 #uyan_cmt_cnt 用户的评论内容

最后用 UYAN.addCmt2 来调用默认的函数,当然,如果你要截获用户的消息,就不需要调用这个函数了

 

很简单吧,这样我们就可以在用户评论发送到友言的服务器前,预处理这些数据

可以把我们需要的数据,通过Ajax提交给自己的服务器,或者修正用户发送的信息,再投递出去

 

 还有一些其他的技巧,大家就自己去发掘吧

posted @ 2012-07-21 05:58 二笔青年 阅读(...) 评论(...) 编辑 收藏