Question

我有一个iframe，我在其中检测到右键并将鼠标事件传递给父级中的函数。这里，（在父函数内），我有逻辑显示自定义上下文菜单，上下文菜单html标记插入到父DOM中。因此需要根据视口（或父DOM）的鼠标位置，但我收到的是相对于iframe。

我尝试使用offsetTop和offsetParent，但这只迭代到内页的body标签。

Answer 1

这是我使用的功能：

// Define class that will hold Object coordinates
function CTopLeft(i_nTop, i_nLeft) {
   this.nTop = i_nTop;
   this.nLeft = i_nLeft;
}

function GetTopLeftFromIframe(i_oElem) {
   var cTL = new CTopLeft(0, 0);
   var oElem = i_oElem;
   var oWindow = window;

   do {
      cTL.nLeft += oElem.offsetLeft;
      cTL.nTop += oElem.offsetTop;
      oElem = oElem.offsetParent;

      if (oElem == null) { // If we reach top of the ancestor hierarchy
         oElem = oWindow.frameElement; // Jump to IFRAME Element hosting the document
         oWindow = oWindow.parent;   // and switching current window to 1 level up
      }
   } while (oElem)

   return cTL;
}

这是http://codecorner.galanter.net/2012/02/26/absolute-coordinates-of-element-inside-of-iframe/

Answer 2

您可以通过从父文档调用iframe来获取顶部和左侧。假设您的iFrame在父文档中具有标识'my_iframe'：

offset_left = parent.document.getElementById('my_iframe').offsetLeft;
offset_top  = parent.document.getElementById('my_iframe').offsetTop;

但这只有在iFrame中的内容属于同源（相同的主机，端口和协议）时才有效！

修改：在bytes.com上也发现了类似的问题： iframe relative mouse position

Answer 3

Yuriy解决方案很有效，直到元素是一个元素的子元素，其位置为：absolute且滚动。（我一直在寻找元素位置而不是鼠标，但我确定你可以修改它以便为它工作）

我的修复：

function iframe_offset(e){
var  x=e.getBoundingClientRect().x
    ,y=e.getBoundingClientRect().y
    ,w=e.ownerDocument.defaultView
    do{
        e = e.offsetParent
        if(e == null){
            e = w.frameElement
            w = w.parent
            if(e){
                x += e.offsetLeft+e.scrollLeft
                y += e.offsetTop+e.scrollTop
            }
        }
    }while(e)
    return {x:x,y:y}
}

Answer 4

至少现在（也可能之前），您在 event 对象（layerX、screenX 等）上有很多坐标，这意味着您可能如果可以，最好只使用这些集合中的一个，以避免这种额外的计算 - 在我的用例中使用 screenX/screenY 作为基础大大简化了事情而不是尝试和计算，并做到了。

确定iframe内的鼠标位置，但包含父项

4 个答案: