Ottieni le coordinate dello schermo dell'elemento DOM

Question

Posso in qualche modo ottenere coordinate dello schermo precise (relative all'angolo superiore sinistro dello schermo) di un oggetto DOM. Attraverso NPAPI \ FireBreath o JavaScript. (Ho bisogno di questo per plugin, che sto scrivendo con FireBreath)

Answer 1

sposta il cursore su un punto della pagina e crea un evento click (trova la finestra, quindi GetWindowRect, calcola una posizione sutable), quindi puoi catturare l'evento, registrare clientX e clientY. Con questo, si costruisce un ponte tra due diversi sistemi di coordinate.

Answer 2

So che non hai menzionato jQuery, ma puoi usare http://api.jquery.com/offset/ come esempio. Combina lo offsetLeft/top di tutti i genitori e gli account per lo scorrimento, fornendo una x, y accurata (in relazione al corpo) per i nodi annidati.

Nota che se stai gestione degli eventi, l'oggetto evento che si dice sempre dove l'evento è accaduto con http://api.jquery.com/event.pageX/ e http://api.jquery.com/event.pageY/

Ancora una volta, ricordare jQuery è di ispirazione solo se non si desidera utilizzarlo.

Ecco come jQuery fa

$.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 .: so che ho fatto questa domanda tempo fa, ma voglio riassumere quello che ho ottenuto alla fine.

element.offsetLeft\Top non funziona come dovrebbe essere in questione.
Dall'HTML è possibile ottenere coords, relativi all'angolo in alto a sinistra dello spazio della pagina, non allo schermo dell'utente stesso.

E da plug-in, di GetWindowRect() WinAPI funzione è possibile ottenere le coordinate dell'angolo superiore sinistro della finestra del browser, relativo alla schermata di utente e da GetClientRect() si può ottenere coordinate dell'angolo superiore sinistro del rettangolo di client.

MA, non è lo stesso punto in alto a sinistra della pagina, c'è sempre qualcosa tra l'angolo dello spazio della pagina e il client rect o la finestra rect. Include le migliori barre del browser e altre cose.

Cosa si può fare? Sembra che non ci sia facile al 100% modo controllabile:

Si può cercare di prendere in considerazione quei bar del browser e calcolare lo spazio tra Client rect e rettangolo di pagina, ma quelle sbarre del browser non costanti da utente a utente, si può avere più di loro, quell'altro, e avrai tutto il tuo sistema di coordinate rovinato. Quindi, puoi in qualche modo registrare la quantità di barre e aggiunte installate nel browser, e in base a tale calcolare la quantità di spazio che verrà consumata da esse, ma le barre e le aggiunte non sono le stesse, e di nuovo hai troppe variabili da considerare .

C'è un modo un po 'più semplice, non puoi andare dall'alto, ma dal basso - ottieni il coord di bottom point di rect e attraverso alcuni calcoli con HTML element.offset - lega il tuo sistema di coordinate al punto in basso a sinistra del finestra.
Non ci sono barre del browser utente in fondo, e quindi può essere un po 'più sicuro nello spazio tra la pagina e l'angolo della finestra, ma alcuni browser hanno barre pop-up lì con informazioni di download ecc., E qui abbiamo rimesso tutto a posto .

Un'altra opzione consiste nell'utilizzare le finestre modali, ovvero aprire la pagina in una finestra modale tramite window.open() dal tuo JavaScript, puoi controllare la quantità di controlli e barre del browser in quelle finestre, puoi sbarazzarti di tutte quelle barre degli utenti e fare una chiara finestra solo con la barra degli indirizzi e la pagina. Ora hai molto più controller e quasi puoi essere sicuro che questo spazio tra gli angoli sarà lo stesso per tutti i tuoi utenti ... quasi.
Ci sono due cose devono essere menzionati:

1) Alcuni browser (ad esempio Google Chrome, come mi ricordo) ottenuto quelle aggiunte browser personalizzati (Firebug per esempio) per apparire come piccole icone vicino bar indirizzo, e loro stanno ancora comparendo vicino alla barra degli indirizzi della finestra modale.
Qual è la differenza che si può chiedere - la differenza è che, per qualche ragione, la parte superiore della finestra del browser diventerà circa 5 pixel più grossa, se c'è anche una di quelle icone. (Ancora si può provare a registrarsi, ci sono di quelli installati sul browser dell'utente, o meno)
E se, comunque, quei 5px non sono cruciali per te - può essere un modo per andare .. se stai bene con la prossima cosa.

2) ovvia - che il divertimento con le finestre modali può essere scomodo per l'utente finale, cos taglia alcune contols del browser e la meccanica che gli utenti del browser abituarsi.