开发者

Determine current mouse position in IFRAME?

I have an IFRAME inside an IFRAME and my getMousePosition method is not able to retrieve the current mouse position inside the iframe. It works in the first Iframe, but when I call the getMousePosition from a function in the parent document it returns fallback values 600 & 350. FYI: I am not able to control the content of the IFrame as it is generated, but it is not an cross domain access. Both IFRAMES and the parent document are hosted on the s开发者_运维问答ame server. I am only programming for Internet Explorer 8. So browser compatibility is not an issue.

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

I have read this question: SOLVED QUESTION but the answer didn't solve my problem. I found this question but none of the answers seem to be working for me. My new edited code:

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


If you call getMousePosition from a parent window then document will point to the parent window document. You should call this method in the context of iframe. Also where is inframe defined and do you update its value on any event?

You can use jquery to attach the mouseover events to link. Using this you will get event object which provides the mouse x/y coordinates of the link relative to the document. I hope it will help you.

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜