Question

我正在使用以下方法为网站创建基本热图：

$(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的点击坐标。 appears that this is possible when using CrazyEgg我通过点击Google广告（位于iframe内）亲自测试了CrazyEgg，并将热图数据正确地返回给CrazyEgg。

有关如何使用iframe完成点击跟踪整个网页正文的任何想法。

Answer 1

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);
    });

FIDDLE http://jsfiddle.net/a9owgqrv/

Answer 2

如果iframe内容根本不需要任何用户互动（点击，滚动等），您可以放置 ~~transparent~~ div它，它会捕获鼠标点击。否则，我认为你运气不好。

（感谢@Andranik表示div实际上并不需要透明（不透明）样式。）

Answer 3

指向不同域名的iframe的简短回答，不使用代理或在iframe上放置导致无法点击iframe的div：no

然而，这是一些血腥的尝试

它使用了点击时触发的模糊事件＆＃34;外部＆＃34;例如，在iframe内部，我添加了mousemove事件以获得用户点击进入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/

跟踪页面的点击坐标，包括iframe

3 个答案: