确定IFRAME中的当前鼠标位置?

时间:2011-08-01 14:10:35

标签: javascript jquery iframe mousemove mouse-position

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

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

我读过这个问题:SOLVED QUESTION但答案并没有解决我的问题。 我找到了这个question,但没有一个答案似乎对我有用。 我新编辑的代码:

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

1 个答案:

答案 0 :(得分:1)

如果从父窗口调用getMousePosition,则文档将指向父窗口文档。您应该在iframe的上下文中调用此方法。还有inframe定义的位置,你在任何事件上更新它的值吗?

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

$(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";
    }
}