獲取DOM元素的屏幕座標

Question

我可以以某種方式獲得DOM對象的精確屏幕座標（相對於屏幕的左上角）。通過NPAPI \ FireBreath或JavaScript。 （需要插件，我正在用FireBreath編寫 ）

Answer 1

您將光標移動到頁面的某個位置，並進行點擊事件（找到窗口，然後GetWindowRect，計算一個可變的位置），然後您可以捕獲該事件，記錄clientX和clientY。由此，您可以在兩個不同的座標系之間架起一座橋。

Answer 2

我知道你沒有提到jQuery，但可以使用http://api.jquery.com/offset/作爲示例。它結合了所有父母和帳戶的offsetLeft/top滾動，爲嵌套節點提供準確的x，y（相對於主體）。

請注意，如果你正在處理事件，事件對象，其中所發生的事件使用http://api.jquery.com/event.pageX/和http://api.jquery.com/event.pageY/

再次提jQuery是靈感只有當你不想使用它總是告訴你。

這裏是jQuery的是如何做的

$.fn.offset = function (options) { 
    var elem = this[0], 
     doc = elem && elem.ownerDocument; 

    if (!doc) { 
     return null; 
    } 

    if (elem === doc.body) { 
     return jQuery.offset.bodyOffset(elem); 
    } 

    return getOffset(elem, doc, doc.documentElement); 
} 

function getOffset(elem, doc, docElem, box) { 
    try { 
     box = elem.getBoundingClientRect(); 
    } catch(e) {} 

    // Make sure we're not dealing with a disconnected DOM node 
    if (!box || !jQuery.contains(docElem, elem)) { 
     return box ? { 
      top: box.top, 
      left: box.left 
     } : { 
      top: 0, 
      left: 0 
     }; 
    } 

    var body = doc.body, 
     win = getWindow(doc), 
     clientTop = docElem.clientTop || body.clientTop || 0, 
     clientLeft = docElem.clientLeft || body.clientLeft || 0, 
     scrollTop = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop || body.scrollTop, 
     scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft, 
     top = box.top + scrollTop - clientTop, 
     left = box.left + scrollLeft - clientLeft; 

    return { 
     top: top, 
     left: left 
    }; 
} 

Answer 3

P.S：我知道，我很久以前就這個問題，但我想總結一下我在結束了。

element.offsetLeft\Top不能正常工作。
從HTML可以得到座標，相對於頁面空間的左上角，而不是用戶屏幕本身。

而來自插件，通過GetWindowRect() winAPI函數可以獲得瀏覽器窗口左上角座標，相對於用戶屏幕，並且通過​​可以得到客戶端矩形左上角的座標。

但是，它與頁面的左上角不一樣，頁面空間的角落和客戶端矩形或窗口矩形之間總是有一些東西。它包括頂級瀏覽器欄和其他東西。

你可以做什麼？似乎沒有簡單的100％可控制的方式：

您可以嘗試考慮這些瀏覽器欄並計算Client rect和頁面的矩形之間的空間，但這些瀏覽器欄在用戶與用戶之間並不固定，可以有更多他們，另一個，你會得到你所有的座標系搞砸。然後，您可以以某種方式註冊已安裝的條形圖和添加到瀏覽器的數量，並根據計算出的空間量，這些數據將被它們使用，但條形圖和添加項不完全​​相同，並且您還有太多變量需要考慮。

有一種簡單的方法，你可以不從頂部，而是從底部開始 - 通過HTML的element.offset得到矩形底點的座標，並通過一些計算 - 將座標系綁定到左下角的點窗口。
底部沒有用戶瀏覽器欄，因此可以對頁面和窗口角之間的空間更有信心，但是某些瀏覽器在那裏出現了帶有下載信息的彈出欄，並且在這裏我們再次搞砸了一切。

另一種選擇是使用模態窗口的 - 即通過window.open()從你的JavaScript打開模態窗口的頁面，你可以控制在這些窗口中瀏覽器控件和酒吧的數量，你可以擺脫所有這些userbars，並做出明確窗口只能使用地址欄和頁面。現在你有了更多的控制權，並且幾乎可以肯定，角落之間的這個空間對所有的用戶來說都是一樣的......差不多。
有兩件事情需要提及：

1）有些瀏覽器（如谷歌Chrome，我記得）得到了那些自定義瀏覽器添加（螢火蟲爲例）出現近地址欄中的小圖標，他們仍然出現在模態窗口的地址欄附近。
你可以問什麼區別 - 不同之處在於，出於某種原因，如果這些圖標中有一個圖標，瀏覽器窗口的頂部會變成5像素左右（也可以嘗試註冊，有沒有或者沒有安裝在用戶瀏覽器上）
而且，如果無論如何，那些5px對你來說不是至關重要的 - 如果你對下一件事情可以接受的話，它可以成爲一種方式。 2）明顯的一點 - 有趣的模式窗口可能會讓最終用戶感到不舒服，因爲它削減了瀏覽器用戶習慣的瀏覽器控件和機制。