我正在为一个网站创建一个基本的热图,使用如下:
$(document).ready(function() {
$(document).on('mousedown', function(evt) {
console.log('X: '+ evt.pageX);
console.log('Y: '+ evt.pageY);
$.post('clickmap.php', {
x:evt.pageX,
y:evt.pageY
});
});
});'
小提琴:http://jsfiddle.net/8jjo7q5y/
工作很好,除了当也包括点击在iframe上的点击坐标。当使用CrazyEgg时,这似乎是可能的,我个人通过点击Google广告(位于iframe内)测试了CrazyEgg,热图数据正确返回到CrazyEgg。
关于如何完成点击跟踪的整个页面正文与iframes包括。
HTML:
<div></div>
<iframe src="http://www.jsfiddle.net"></iframe>
CSS: div {
position: absolute;
width: 300px;
height: 150px;
z-index: 2;
}
iframe {
position: absolute;
width: 300px;
height: 150px;
z-index: 1;
}
JavaScript: $(window).click(function(e) {
console.log("x:" + e.pageX + ", y:" + e.pageY);
});
小提琴 http://jsfiddle.net/a9owgqrv/
如果iframe
内容根本不需要任何用户交互(点击,滚动等),您可以在其顶部放置一个透明的 div
,这将捕获鼠标点击。否则,我认为你运气不好。
(感谢@Andranik显示div
实际上不需要透明(不透明度)样式)
对于iframe指向不同的域而不使用代理或在iframe上放置div导致无法点击iframe的简短回答:no
然而,这里有一些血腥的企图
它使用模糊事件,当点击窗口的"外部",例如在iframe内,我添加了鼠标移动事件有坐标,用户点击iframe,但这只工作一次,再次工作的用户必须点击iframe外部和内部,但它比没有更好;-)
$(document).ready(function() {
var mouse = {x: 0, y: 0};
document.addEventListener('mousemove', function(e){
mouse.x = e.clientX || e.pageX;
mouse.y = e.clientY || e.pageY
}, false);
$(window).blur( function(e){
console.log("clicked on iframe")
console.log('X: '+ mouse.x);
console.log('Y: '+ mouse.y);
});
$(document).on('mousedown', function(evt) {
console.log('X: '+ evt.pageX);
console.log('Y: '+ evt.pageY);
//$.post('clickmap.php', {
//x:evt.pageX,
//y:evt.pageY
//});
});
});
http://jsfiddle.net/8jjo7q5y/1/