Erhalten Bildschirm-Koordinaten des DOM-element

Kann ich irgendwie die genaue Bildschirm-Koordinaten (relativ zur linken oberen Ecke des Bildschirms) ein DOM-Objekt. Durch NPAPI\FireBreath oder JavaScript. (Brauche diese für plugin, das ich Schreibe
mit FireBreath)

InformationsquelleAutor Max Yari | 2013-03-29

c++coordinates dom firebreath javascript

1

bewegen Sie den cursor irgendwo auf der Seite ,und machen Sie eine click-Ereignis.(Sie finden das Fenster,dann GetWindowRect ,caculate einem sutable position), dann können Sie fangen die Veranstaltung,aufzuzeichnen clientX und clientY. Durch diese ,Sie bauen eine Brücke zwischen zwei verschiedenen Koordinatensystem.
- Hehe, nette Antwort. Ich habe tatsächlich diese Idee kam, aber erst nach einem Jahr habe ich gepostet diese Frage. Es ist eigentlich ziemlich einfach. Obwohl einige Sachen poping-up während der Nutzung der website, den download-Balken e.t.c kann die Schraube etwas, so ist es nicht ideal, aber sieht aus wie das beste was man bekommen kann.
InformationsquelleAutor Jason Zheng
6

P. S.: ich weiß, dass ich diese Frage vor langer Zeit, aber ich möchte zusammenfassen, was ich bekam am Ende.

element.offsetLeft\Top funktioniert nicht wirklich so, wie es sein soll in Frage.

Aus der HTML, die Sie bekommen können Koordinaten relativ zur oberen linken Ecke der Seite das der Raum, nicht der user Bildschirm selbst.

Und vom plugin, von GetWindowRect() winAPI-Funktion, die Sie bekommen können die Koordinaten der linken oberen Ecke des browser-Fensters, relativ zum Benutzer-Bildschirm, und durch GetClientRect() können Sie bekommen Koordinaten der linken oberen Ecke des Client-Rechteck.

ABER es ist nicht der gleiche Punkt wie oben Links auf der Seite, es gibt immer etwas zwischen Ecke von Seite Raum -, und client-rect oder Fenster rect. Es enthält top-browser-bars und andere Sachen.

Was können Sie tun? Es scheint, dass es nicht einfach 100% steuerbar Weg:

Können Sie versuchen, diese browser-bars, und berechnen Sie den Abstand zwischen Client rect und Seite Rechteck, aber diese browser-leisten nicht konstant vom Benutzer, kann man mehr von Ihnen, dass ein anderer, und erhalten Sie Ihr Koordinatensystem nach oben geschraubt. Dann, kann man das irgendwie registrieren die Menge der installierten bars und Ergänzungen an den browser, und nach, dass zu berechnen Speicherplatz, der verbraucht wird, aber bars und Ergänzungen nicht die gleiche, und wieder, du hast viel zu viel Variablen zu berücksichtigen.

Es ist ein bisschen einfacher Weg, können Sie gehen, nicht von oben, sondern von unten - Holen Sie sich die coord ist der untere Punkt von rect und durch einige Berechnungen mit HTML element.offset - Bindung des Koordinatensystems zum unteren linken Punkt des Fensters.

Du hast keine Benutzer-browser-leisten an der Unterseite, und kann daher ein wenig mehr Vertrauen im Raum zwischen der Seite und Fenster-Ecke, aber einige Browser bekam pop-up-bars gibt es mit den download-Informationen.e.t.c, und hier bekamen wir schraubten alles wieder hoch.

Andere option ist die Verwendung von modal-window-s - D. H. öffnen Sie die Seite in modalen Fenster, durch window.open() aus Ihrem JavaScript-Sie können Steuern, Höhe des browser-controls und bars, in denen windows -, können Sie loszuwerden, alle diese userbars! und eine klare Fenster mit Adresszeile und die Seite. Jetzt haben Sie viel mehr Kontrolle, und kann fast sicher sein, dass dieser Raum zwischen den Ecken wird die gleiche für alle Benutzer... fast.

Es gibt zwei Dinge, die erwähnt werden müssen:

1)bei Einigen Browsern (z.B. google chrome, soweit ich mich erinnere) bekam diese custom-browser-Erweiterungen (Firebug z.B.) erscheinen als kleine Symbole in der Nähe der Adressleiste, und Sie sind immer noch erscheinen in der Nähe der Adressleiste des modal-Fenster.

Was ist der Unterschied, den Sie Fragen können - der Unterschied ist, dass aus irgendeinem Grund, oben auf dem browser-Fenster wurde um 5 Pixel dicker, wenn es gibt sogar eine dieser Ikonen.(wieder können Sie versuchen, zu registrieren, gibt es von denen installiert, die auf Benutzer-browser, oder nicht)

Und wenn, wie auch immer, diese 5px nicht entscheidend für dich - es kann der Weg zu gehen.. wenn Sie ok sind, mit der nächsten Sache.

2)Offensichtlicher -, dass der Spaß mit modal windows kann unbequem sein für end-user, cos schneidet Sie einige browser-Steuerung und in der mechanik ist, dass die browser der Benutzer gewöhnen.

InformationsquelleAutor Max Yari

Kenne ich Sie gar nicht erwähnen, jQuery, aber Sie können http://api.jquery.com/offset/ als ein Beispiel. Es vereint die offsetLeft/top alle Eltern und Konten für scrollen, so dass Sie eine genaue x,y (in Bezug auf den Körper) für verschachtelte Knoten.

Beachten Sie, dass wenn Sie die Handhabung von events, das event-Objekt immer sagt Ihnen, wo das Ereignis passiert ist mit http://api.jquery.com/event.pageX/ und http://api.jquery.com/event.pageY/

Wieder, zu erwähnen, jQuery, ist für die inspiration nur, wenn Sie nicht wollen, es zu benutzen.

Hier ist, wie jQuery funktioniert es

$.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
    };
}

Danke, es ist ziemlich nützlich.

InformationsquelleAutor Juan Mendes

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.