关于javascript：确定IFRAME中的当前鼠标位置？


Determine current mouse position in IFRAME?

我在IFRAME中有一个IFRAME，而我的getMousePosition方法无法检索iframe中的当前鼠标位置。 它可以在第一个Iframe中使用，但是当我从父文档中的函数调用getMousePosition时，它会返回后备值600和350。仅供参考：在生成IFrame时，我无法控制其内容，但不能 跨域访问。 IFRAMES和父文档都托管在同一服务器上。 我只为Internet Explorer 8编程。因此，浏览器兼容性不是问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  function getMousePosition(){
  if(!inframe)
      $(document).mousemove(function(e){
           mouseX = e.pageX
           mouseY = e.pageY
      });
  else
  {
    mouseX = 600;
    mouseY = 350;
  }

  //This is where I get the Iframe Document (I then parse through the document, picking up the specific links and storing them in the array verifiedlinks)
  var src = window.frames[iframeindex].document.getElementsByTagName("a");
  // This is where I call my function which uses the values returned by getMousePosition (verifiedlinks is an array of links inside the iframe):

    verifiedlinks[i].onmouseover = function()
    {
        showPeopleDetails(this.getAttribute('username'));
    }
  // This should display User Details at the current Mousecoordinates
function showPeopleDetails(UserId){
var vpd = document.getElementById("PeopleDetails");
    if ( vpd != null ) {
        getMousePosition();
        vpd.style.left=mouseX+10; //mouseX and mouseY are defined globally
        vpd.style.top=mouseY+10;
        vpd.style.display="block";
    }
}

我已经阅读了以下问题：已解决的问题，但答案并未解决我的问题。
我发现了这个问题，但似乎没有一个答案对我有用。
我新编辑的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
function showPeopleDetails(UserId, x, y){
var vpd = document.getElementById("PeopleDetails");
try
{
    if ( vpd != null ) {
        //getMousePosition();
        //alert("MouseX:" +mouseX+" MouseY:"+mouseY);
        //vpd.style.left=mouseX+10;
        //vpd.style.top=mouseY+10;
        vpd.style.left = x +10 - window.frames[2].document.body.scrollLeft;
        vpd.style.top = y +10 - window.frames[2].document.body.scrollTop;
     }
}

如果从父窗口调用getMousePosition，则文档将指向父窗口文档。 您应该在iframe的上下文中调用此方法。 另外，inframe定义在哪里，是否在任何事件中更新其值？

您可以使用jquery将mouseover事件附加到链接。 使用此方法，您将获得事件对象，该事件对象提供相对于文档的链接的鼠标x / y坐标。 希望对您有帮助。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(verifiedlinks[i]).mouseover(function(e){
        showPeopleDetails($(this).attr('username'), e.pageX, e.pageY);
}

function showPeopleDetailsNow(UserId, x, y){
var vpd = document.getElementById("PeopleDetails");
    if ( vpd != null ) {
        getMousePosition();
        //vpd.style.left=mouseX+10; //mouseX and mouseY are defined globally
        //vpd.style.top=mouseY+10;
        vpd.style.left= x +10 + $(document).scrollTop(); //mouseX and mouseY are defined globally
        vpd.style.top= y +10;
        vpd.style.display="block";
    }
}
相关讨论