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

Question

我有一个网页，其中包含一个用iframe渲染的另一页（同一域名）。我需要获取与父文档相关的鼠标位置。请记住，iframe可以双向滚动。我已尝试使用offset，但没有成功。

$('#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....
 })

- mariob_452

---

如何计算 top.window.screenX/Y 和 e.screenX/Y 的位置？ - Teemu

@Teemu top.window.screenX 在Chrome中不起作用。 - mariob_452

好的，我还没有测试过，但是文档说它在Chrome中也被支持。当然，这可能是错误的。 - Teemu

Answer 1

一种方法是获取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);
})

- quik_silv

---

我只需要对一行代码进行了一个小调整（我认为是打错了），但它现在可以工作了！ var x = e.clientX + iframepos.left; - mariob_452

只有当 iframe 是顶层框架的直接后代并且 iframes 也必须在同源上才能正常工作。我希望窗口上有一些属性可以获取它。 - Maciej Krawczyk

Answer 2

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()并将其添加到总偏移量中。

- Jason Williams