Uzyskaj współrzędne ekranu elementu DOM

Question

Czy mogę w jakiś sposób uzyskać dokładne współrzędne ekranu (względem lewego górnego rogu ekranu) obiektu DOM. Poprzez NPAPI \ FireBreath lub JavaScript. (Potrzebuję wtyczki, że piszę z FireBreath)

Answer 1

przesuwasz kursor w dowolne miejsce strony i wykonujesz zdarzenie click (znajdź okno, następnie GetWindowRect, caculate a sutable position), następnie możesz złapać zdarzenie, nagrać clientX i clientY. W ten sposób budujesz most pomiędzy dwoma różnymi układami współrzędnych.

Answer 2

Wiem, że nie wspomniałeś o jQuery, ale możesz użyć przykładu http://api.jquery.com/offset/ jako przykładu. Łączy on w sobie offsetLeft/top wszystkich rodziców i kont dla przewijania, dając ci dokładne x, y (w stosunku do ciała) dla zagnieżdżonych węzłów.

Zauważ, że jeśli obsługi zdarzeń, obiekt zdarzenia zawsze powie Ci, gdzie zdarzenie miało miejsce przy użyciu http://api.jquery.com/event.pageX/ i http://api.jquery.com/event.pageY/

Znowu wspomnieć jQuery jest tylko inspiracji, jeśli nie chcesz go używać.

Oto jak jQuery robi

$.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 .: Wiem, że zrobiłem to pytanie już dawno temu, ale chcę, aby podsumować to, co mam na końcu.

element.offsetLeft\Top nie działa tak, jak powinno.
Z HTML można uzyskać współrzędne w stosunku do lewego górnego rogu obszaru strony, a nie sam ekran użytkownika.

I od wtyczki, by GetWindowRect() WINAPI funkcji można uzyskać współrzędne lewego górnego rogu okna przeglądarki, w stosunku do ekranu użytkownika, a przez GetClientRect() można uzyskać coords lewego górnego rogu prostokąta Client.

ALE, nie jest to ten sam punkt co lewy górny róg strony, zawsze jest coś pomiędzy rogiem strony, a klientem, lub prostokątem. Zawiera najlepsze paski przeglądarki i inne rzeczy.

Co możesz zrobić? Wygląda na to, że nie ma łatwego, w 100% kontrolowanego sposobu:

Możesz spróbować rozważyć te paski przeglądarki i obliczyć odległość między Client rect a prostokątem strony, ale te paski przeglądarki nie są stałe od użytkownika do użytkownika, można mieć więcej oni, ten inny, a dostaniecie cały swój układ współrzędnych. Następnie możesz w jakiś sposób zarejestrować ilość zainstalowanych pasków i dodatków do przeglądarki, a według tego obliczyć ilość miejsca, które zostaną przez nich zużyte, ale paski i dodatki nie będą takie same, i znowu masz zbyt dużo zmiennych do rozważenia .

Jest nieco łatwiejszy sposób, nie można przejść od góry, ale od dołu - uzyskać współrzędne dolnego punktu prostokąta i przeliczyć niektóre obliczenia za pomocą kodu HTML element.offset - powiązać układ współrzędnych z lewym dolnym punktem okno.
Nie masz żadnych pasków przeglądarki użytkownika na dole, a zatem może być trochę pewniej w przestrzeni między rogiem strony i okna, ale niektóre przeglądarki mają tam wyskakujące paski z informacjami o pobieraniu itp., A tutaj wszystko jest spieprzone ponownie .

Inną opcją jest użycie okna modalnego - np. Otwarcie strony w oknie modalnym poprzez ze swojego JavaScript, możesz kontrolować ilość kontrolek i pasków przeglądarki w tych oknach, możesz pozbyć się wszystkich tych pasków i jasno określić okno tylko z paskiem adresu i stroną. Teraz masz znacznie więcej kontroli i możesz być prawie pewien, że ta przestrzeń między narożnikami będzie taka sama dla wszystkich użytkowników ... prawie.
Istnieją dwie rzeczy muszą być wymienione:

1) Niektóre przeglądarki (na przykład Google Chrome, jak pamiętam) dostał te dodatki zwyczaj przeglądarki (Firebug na przykład) do stawienia się jako małe ikony w pobliżu baru adress, a oni nadal pojawiają się w pobliżu paska adresu okna modalnego.
Jaka jest różnica, którą możesz zadać - różnica polega na tym, że z jakiegoś powodu górna część okna przeglądarki stanie się około 5 pikseli grubsza, jeśli jest choćby jedna z tych ikon. (Ponownie możesz spróbować zarejestrować, czy są jakieś z tych zainstalowanych w przeglądarce użytkownika, czy nie).
A jeśli tak, te 5px nie są dla ciebie kluczowe - może to być sposób na zrobienie .. jeśli jesteś w porządku z następną rzeczą.

2) Oczywiste - ta zabawa z oknami modalnymi może być niewygodna dla użytkownika końcowego, ponieważ przecina niektóre mechanizmy przeglądarki i mechanizmy, do których użytkownicy przeglądarki się przyzwyczają.