什么是正确的方式来获取相对于窗口的HTML元素的边界框？ [英] What is the proper way to get bounding box for HTML elements relative to the Window?

问题描述

我正在写一个Firefox扩展。我试图限制它只是XUL + Javascript（没有XPCOM）。当我得到一个HTML元素的 mouseover 事件时，我需要在窗口坐标系（即内置的XUL文档browser.xul）中获得边界框。

显而易见的地方是在mouseover事件处理程序中加入类似的东西：

  var rect = e.target.getBoundingClientRect（）; 
  

这很好，但是这给了我在HTML文档坐标系中的正确性， HTML绘图区域的左上角。我想在这个图像附近使用panel.openPopup（）来显示一个xul：panel元素（但是不使用预定义的弹出的位置），所以我需要翻译的坐标。

我试着做以下（在XUL DOM）获得偏移量来做翻译，它适用于一些网站，但不是全部，并且似乎没有考虑到侧边栏所需的x翻译。

  var appcontent = document.getElementById（appcontent）; 
 if（appcontent）{
 chromeOffsetX = r.left; 
 chromeOffsetY = r.top; 
 
 
 
 $ b $ p 
 $ b $ p那么，最好的办法是什么？ 
 
 
 
 注意：对于IE扩展，我会使用（并使用） IDisplayServices :: TransformRect（）  - 有类似Firefox的东西吗？
 
 $ 
 
解决方案
原来得到的位置是不相关的，因为您可以将项目相对于元素使用类似于：
  hoverPanel.openPopup（someElement，overlap，offsetX，offsetY，false，false）; 
  
 
I'm writing a Firefox extension.  I'm trying to limit it to just XUL+Javascript (no XPCOM).  When I get a mouseover event for an HTML element, I need to get its bounding box in the windows coordinate system (that is the built-in XUL document browser.xul).  

The obvious place to start is to put something like this in the mouseover event handler:
var rect = e.target.getBoundingClientRect();
Which is great, but that gives me the rect in the HTML document's coordinate system, which is relative to the upper left corner of the HTML drawing area.  I want to display a xul:panel element using panel.openPopup() near this image (but not using one of the predefined popup positions), so I need to translate the coordinates.

I've tried doing the following (in the XUL dom) to get the offset's to do the translation, and it works for some sites, but not all, and doesn't seem to take into account the x translation needed for sidebars.
var appcontent = document.getElementById("appcontent");
if (appcontent) {
  chromeOffsetX = r.left;
  chromeOffsetY = r.top;
}
So, what's the best way to approach this?  

Note: for IE extensions I would use (and have used) IDisplayServices::TransformRect()—is there something similar for Firefox?

Now with bounty!
解决方案
Turns out getting the location is irrelevant because you can position items relative to the element using something like:
hoverPanel.openPopup(someElement, "overlap", offsetX, offsetY, false, false);


                        
这篇关于什么是正确的方式来获取相对于窗口的HTML元素的边界框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！