javascript - 百度统计--链接点击图 是如何实现的？

Question

http://tongji.baidu.com/web/5473605/custom/pageclk/view?type=link&siteId=1942168&pageClkId=249099

页面里用iframe嵌套了一个完整页面，并在上面覆盖每个可点击链接的点击数等相关数据。 有没有人知道这是如何实现的，以及还有没有类似的例子？

----add----------------
我可能没表述清楚，我想问的是：页面的每个链接对应的点击数都已经有了，存在一组json里，然后这个页面是怎么生成的，就是在iframe里怎么嵌入一个完整的页面，以及为每个链接添加上面的遮罩层

----add----------------
还有没有别的同学有想法？欢迎回答。。：）

Answer 1

你指的应该是类似这样的页面叠加吧

这个有两个问题：监控统计鼠标的点击事件、生成点击热图或者页面叠加

1. 监控统计鼠标的点击事件

这个功能应该是通过JS实现的，这方面不太了解，链接里有篇文章，可以看下。

http://www.biaodianfu.com/how-to-make-heatmap.html

2. 生成点击热图或者页面叠加

生成热图

http://www.labsmedia.com/clickheat/index.html

页面叠加的话，开源的统计系统——piwik中是这样实现的

<iframe id="Overlay_Iframe" src="index.php?module=Overlay&amp;action=startOverlaySession&amp;idsite=1&amp;period=month&amp;date=today#http://bbs.jconline.cn/" frameborder="0" style="height: 392px; width: 1134px;"></iframe>

可以看到这里引用的不是原来的页面，而是一个经过服务端处理的页面

展开iframe

可以看到在原有的html代码之外，加入了大量的如下代码

<p class="PIS_LinkTag" style="display: none;"><span>0.4%</span></p>

也就是说，服务端首先读取你要查看的页面，然后在获取的页面中添加统计数据的html和js等相关代码，然后返还给浏览器。

百度的实现应该类似。

希望能帮到你:)