डीओएम तत्व

Question

के स्क्रीन निर्देशांक प्राप्त करें क्या मैं किसी भी तरह से डीओएम ऑब्जेक्ट के सटीक स्क्रीन निर्देशांक (स्क्रीन के ऊपरी बाएं कोने के सापेक्ष) प्राप्त कर सकता हूं। एनपीएपीआई \ फायरब्रेट या जावास्क्रिप्ट के माध्यम से। (प्लगइन के लिए इस की जरूरत है, कि मैं FireBreath साथ लिख रहा हूँ)

Answer 1

आप कर्सर को पृष्ठ के किसी भी स्थान पर ले जाते हैं, और एक क्लिक ईवेंट बनाते हैं। (विंडो ढूंढें, फिर GetWindowRect, एक sutable स्थिति को caculate करें) तो आप ईवेंट को पकड़ सकते हैं, क्लाइंटएक्स और क्लाइंट को रिकॉर्ड कर सकते हैं। इसके द्वारा, आप दो अलग समन्वय प्रणाली के बीच एक पुल का निर्माण करते हैं।

Answer 2

मुझे पता है तुम jQuery का उल्लेख नहीं था, लेकिन आप एक उदाहरण के रूप http://api.jquery.com/offset/ उपयोग कर सकते हैं। यह स्क्रॉलिंग के लिए सभी माता-पिता और खातों के offsetLeft/top को जोड़ता है, जो आपको नेस्टेड नोड्स के लिए एक सटीक एक्स, वाई (शरीर के संबंध में) देता है।

ध्यान दें कि आप घटनाओं से निपटने रहे हैं, घटना वस्तु हमेशा आपको बताता है कि जहां घटना 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

पी.एस है .: मुझे लगता है मैं बहुत पहले इस सवाल का बना पता है, लेकिन मैं संक्षेप में प्रस्तुत करने के लिए क्या मैं अंत में मिला चाहते हैं।

element.offsetLeft\Top वास्तव में प्रश्न में होने के तरीके से वास्तव में काम नहीं करता है।
एचटीएमएल से आप पेज की जगह के ऊपरी-बाएं कोने के सापेक्ष कॉर्ड प्राप्त कर सकते हैं, न कि उपयोगकर्ता स्क्रीन।

और प्लगइन से, GetWindowRect() द्वारा WINAPI ढंग से काम आप ब्राउज़र विंडो के ऊपरी-बाएं कोने, उपयोगकर्ता स्क्रीन के सापेक्ष के निर्देशांकों को प्राप्त कर सकते हैं और GetClientRect() द्वारा आप क्लाइंट आयत के ऊपरी बाएं कोने की coords मिल सकती है।

लेकिन, यह पृष्ठ के शीर्ष-बाएं के समान बिंदु नहीं है, पृष्ठ के स्थान के कोने और क्लाइंट रेक्ट, या विंडो रेक्ट के बीच हमेशा कुछ होता है। इसमें शीर्ष ब्राउज़र बार और अन्य सामान शामिल हैं।

आप क्या कर सकते हैं? ऐसा लगता है कि कोई आसान 100% नियंत्रित करने योग्य तरीका नहीं है:

आप उन ब्राउज़र सलाखों पर विचार करने और Client rect और पृष्ठ के आयत के बीच की जगह की गणना करने का प्रयास कर सकते हैं, लेकिन उन ब्राउज़र बार उपयोगकर्ता से उपयोगकर्ता तक स्थिर नहीं हैं, जिनमें से कोई अधिक हो सकता है उन्हें, वह दूसरा, और आप अपने सभी समन्वय प्रणाली को खराब कर देंगे। फिर, आप किसी भी तरह ब्राउज़र में स्थापित बार और जोड़ों की मात्रा पंजीकृत कर सकते हैं, और उस गणना की मात्रा के अनुसार, जो उनके द्वारा खाया जाएगा, लेकिन बार और जोड़ समान नहीं हैं, और फिर आपको विचार करने के लिए बहुत अधिक चर मिल गया है ।

थोड़ा आसान तरीका है, आप शीर्ष से नहीं जा सकते हैं, लेकिन नीचे से - संदर्भ के निचले बिंदु के समन्वय को प्राप्त करें और HTML की element.offset के साथ कुछ गणनाओं के माध्यम से प्राप्त करें - अपने समन्वय तंत्र को नीचे-बाएं बिंदु पर बाध्य करें खिड़की।
आपको नीचे कोई उपयोगकर्ता ब्राउज़र बार नहीं मिला है, और इसलिए पेज और विंडो कोने के बीच की जगह में थोड़ा अधिक आत्मविश्वास हो सकता है, लेकिन कुछ ब्राउज़रों को डाउनलोड जानकारी आदि के साथ पॉप-अप बार मिल गए हैं, और यहां हमें सब कुछ फिर से खराब हो गया है ।

एक अन्य विकल्प मोडल विंडो का उपयोग करने के लिए है - यानी आपकी जावास्क्रिप्ट से window.open() के माध्यम से मोडल विंडो पेज खोलते हैं, तो आप उन विंडो में ब्राउज़र नियंत्रण और सलाखों की मात्रा को नियंत्रित कर सकते हैं, आप उन सभी userbars से छुटकारा पाने और एक स्पष्ट कर सकते हैं केवल एड्रेस बार और पेज के साथ खिड़की। अब आपको बहुत अधिक नियंत्रण मिला है, और लगभग यह सुनिश्चित हो सकता है कि कोनों के बीच यह जगह आपके सभी उपयोगकर्ताओं के लिए समान होगी ... लगभग।
दो बातें उल्लेख करने की आवश्यकता नहीं है:

1) कुछ ब्राउज़र (उदाहरण गूगल क्रोम के लिए, के रूप में मुझे याद है) पता बार के पास के रूप में छोटे आइकन को दिखाना उन कस्टम ब्राउज़र अतिरिक्त (उदाहरण के लिए Firebug) मिल गया है, और वे अभी भी मोडल विंडो के एड्रेस बार के पास दिखाई दे रहे हैं।
आप क्या अंतर पूछ सकते हैं - अंतर यह है कि, किसी कारण से, ब्राउजर विंडो का शीर्ष लगभग 5 पिक्सेल फ़ैटर बन जाएगा, यदि उनमें से एक आइकन भी है। (फिर आप पंजीकरण करने का प्रयास कर सकते हैं, क्या कोई है उपयोगकर्ता ब्राउज़र पर स्थापित, या नहीं)
और यदि वैसे भी, वे 5px आपके लिए महत्वपूर्ण नहीं हैं - यह जाने का एक तरीका हो सकता है .. यदि आप अगली चीज़ के साथ ठीक हैं।

2) स्पष्ट एक - मोडल विंडोज़ के साथ मजेदार अंत उपयोगकर्ता के लिए असहज हो सकता है, क्योंकि यह ब्राउज़र ब्राउज़र उपयोगकर्ताओं को उपयोग करने वाले कुछ ब्राउज़र कंटोल और मैकेनिक्स में कटौती करता है।