Получить координаты экрана элемента DOM

Question

Можно ли каким-то образом получить точные координаты экрана (относительно верхнего левого угла экрана) объекта DOM. Через NPAPI \ FireBreath или JavaScript. (Нужно это для плагина, который я пишу с FireBreath)

Answer 1

вы перемещаете курсор на какую-либо страницу и делаете событие клика. (Найдите окно, затем GetWindowRect, caculate позицию, разрешенную), тогда вы можете поймать событие, записать 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 функции вы можете получить координаты левого верхнего угла окна браузера, относительно экрана пользователя, а GetClientRect() вы можете получить COORDS из верхнего левого угла прямоугольника клиента.

НО, это не то же самое, что и левая верхняя часть страницы, всегда есть что-то между углом пространства страницы и клиентом rect или окном rect. Он включает в себя верхние бары браузера и другие вещи.

Что вы можете сделать? Кажется, что нет простого 100% управляемого метода:

Вы можете попробовать рассмотреть эти полосы браузера и вычислить пространство между Client rect и прямоугольником страницы, но эти полосы браузера не постоянны от пользователя к пользователю, и у вас может быть больше их, это другой, и вы получите всю свою систему координат. Затем вы можете как-то зарегистрировать количество установленных баров и дополнений в браузере, и в соответствии с этим вычислить объем пространства, который будет потребляться ими, но бары и дополнения не совпадают, и снова вы получили слишком много переменных, чтобы рассмотреть ,

Существует немного более простой способ, вы можете идти не сверху, а снизу - получить координату нижней точки прямоугольника и выполнить некоторые вычисления с помощью HTML element.offset - привязать вашу систему координат к нижней левой точке окно.
У вас нет ни одного браузера браузера внизу, и поэтому он может быть немного более уверенным в пространстве между страницей и окном, но в некоторых браузерах есть всплывающие окна с информацией о загрузке и т. Д., И здесь мы снова все испортили ,

Другой вариант - использовать модальные окна - то есть открыть страницу в модальном окне через window.open() с вашего JavaScript, вы можете контролировать количество элементов управления браузером и баров в этих окнах, вы можете избавиться от всех этих пользовательских панелей и четко определить окно только с адресной панелью и страницей. Теперь вы получили гораздо больше контроля и можете почти быть уверены, что это пространство между углами будет одинаковым для всех ваших пользователей ... почти.
Существует две вещи, которые должны быть упомянуты:

1) Некоторые браузеры (например, Google Chrome, как я помню) получили эти дополнения пользовательского браузера (Firebug, например), чтобы выглядеть как маленькие иконки возле адресной строке, и они все еще появляются возле адресной строки модального окна.
Какую разницу вы можете задать - разница в том, что по какой-то причине верх окна браузера станет примерно на 5 пикселей толще, если есть даже один из этих значков (снова вы можете попробовать зарегистрироваться, есть ли какие-либо из тех, которые установлены в браузере пользователя или нет)
И если, во всяком случае, эти 5px не имеют решающего значения для вас - это может быть способ пойти .. если вы в порядке со следующей вещью.

2) Очевидное - это удовольствие от модальных окон может быть неудобно для конечного пользователя, поскольку он разрезает некоторые контуры и механизмы браузера, к которым привыкли пользователи браузера.