从iframe内部获取绝对鼠标位置

我有一个iframe的网页呈现另一个页面(相同的域)。 我需要获取与父文档相关的鼠标位置。 请注意,iframe可以双向滚动。 我尝试过使用偏移而没有运气。

$('#iframe').contents().find('html').on('mousemove', function (e) { //gives me location in terms of the iframe but not the entire page. var y = e.pageY; //gives me 0 var y = $(this).offset().top; //more code here.... }) 

一种方法是在父窗口中获取iframe的位置,并将其添加到相对于iframe本身的鼠标位置。 在下面扩展您的代码,

 var iframepos = $("#iframe").position(); $('#iframe').contents().find('html').on('mousemove', function (e) { var x = e.clientX + iframepos.left; var y = e.clientY + iframepos.top; console.log(x + " " + y); }) 

event.clientX,event.clientY在每个浏览器中都不起作用。 但是,jQuery有一个解决方案。 另外,当你的iframe在另一个iframe中时你会怎么做? 我有一个解决方案,跨浏览器使用嵌套的iframe。

 GetPosition: function (event) { var $body = $("body"); var offsetLeft = event.pageX - $body.scrollLeft(); var offsetTop = event.pageY - $body.scrollTop(); if (window != parent.window) { // event was fired from inside an iframe var $frame = parent.$("iframe#" + window.frameElement.id); var framePos = $frame.position(); offsetLeft += framePos.left; offsetTop += framePos.top; } if (parent.window != parent.parent.window) { // event was fired from inside an iframe which is inside another iframe var $frame = parent.parent.$("iframe#" + parent.window.frameElement.id); var framePos = $frame.position(); offsetLeft += framePos.left; offsetTop += framePos.top; } return [offsetLeft, offsetTop]; } 

我希望这是一个完美的解决方案。 如果您的iframe位于固定布局中或绝对定位为模式对话框,则此方法有效。 但是,如果您的iframe位于另一个绝对定位的容器内,您还必须获取该容器的.position()并将其添加到总偏移量中。