Позиция X и Y элемента относительно браузера (Примечание: используются фреймы)

Question

Я пытаюсь получить координаты X и Y элемента относительно окна браузера.

Система, над которой я работаю, состоит из различных рамок. Как правило, я вообще не смотрю на рамки, но сейчас я работаю над программным обеспечением, которое их использует довольно много.

Я создаю всплывающее окно, которое должно располагать всплывающее окно точно рядом с определенным элементом. Этот элемент может быть где угодно в любом из кадров в любое время.

Таким образом, мне нужно определить координаты X и Y элемента относительно окна браузера, поэтому я могу разместить свое всплывающее окно рядом с ним.

Я пробовал положение(), offset() и даже getBoundingClientRect(), но пока не повезло.

Неужели кто-нибудь когда-либо пробовал это?

Answer 1

Предположим страницы строится аналогично следующему:

• окно Root (т.е. окно браузера, # ID = ROOT)
  • рамка (рамка-набор или IFrame, # ID = 1)
  • кадров (кадр установить или IFrame, # ID = 2)

по моему разумению, вы хотите сделать всплывающие окна (подсказки, возможно?) на ROOT, но поместите их на основе соответствующего элемента в 1 или 2. Это создает проблему, поскольку любое позиционирование, сделанное на ROOT, очевидно, будет относиться к позиционированию ROOT, а не к подрамкам. Руководством следовать, возможно, может быть что-то вроде:

1. Получите абсолютное положение элемента (# ID = ELEM) относительно его окна.
2. Получите ссылку на ROOT и выполните свое всплывающее позиционирование в контексте ROOT.
3. Теперь, когда вы находитесь в контексте ROOT и имеете абсолютное положение ELEM, измените положение, чтобы включить абсолютное положение содержащего фреймы ELEM в контексте ROOT и отобразить всплывающее окно в этой новой позиции.

Некоторые принципы кода с помощью JQuery:

// executing within the context of 1.2: 
// get the element to which the popup relates 
var ELEM = $("#ELEM"); 
// get the root window, i.e. ROOT 
var ROOT = (function() { 
    var r = window; 
    while ($("#SOME-UNIQUE-ELEMENT-ON-ROOT", r).length == 0) { 
     r = r.parent; 
    } 
    return r; 
})(); 
// get ELEM's current absolute position in relation to 1.2 
var top = ELEM.position().top; 
var left = ELEM.position().left; 
// get the current document's containing element in relation to ROOT 
var C = $((document.parentWindow || document.defaultView).frameElement.parentNode); 
// modify ELEM's position to compensate for the absolute position of C on ROOT 
top += C.position().top; 
left += C.position.left; 

Теперь, когда у вас есть новое абсолютное положение где для отображения всплывающего окна на ROOT, вызовите движок рендеринга с использованием новой «верх» и «левые» координаты ,

Надеюсь, что это имело смысл вообще ...