Jsdom: ऑफ़सेटविड्थ, ऑफ़सेटहाइट, ऑफ़सेटटॉप, और ऑफ़सेट लेफ्ट

को निर्मित 1 फ़र॰ 2011 · 32टिप्पणियाँ · स्रोत: jsdom/jsdom

मैं HighCharts के लिए सर्वर-साइड रेंडरर को लागू करने का प्रयास कर रहा हूं। परिणामी एसवीजी मार्कअप को छोड़कर सब कुछ ठीक काम करता प्रतीत होता है, सभी जगह x, y, चौड़ाई और ऊंचाई मान गायब हैं। कुछ डिबगिंग के माध्यम से मेरा मानना है कि मैंने समस्या को इस तथ्य पर इंगित किया है कि ऑफ़सेटविड्थ, ऑफ़सेट हाइट, ऑफ़सेटटॉप और ऑफ़सेट लेफ्ट सभी तत्व के लिए अपरिभाषित हैं।

क्या इन संपत्तियों को भविष्य के रिलीज में शामिल किया जाना है? साथ ही, क्या कोई वर्कअराउंड है जिसे मैं इस समय लागू कर सकता हूं?

css feature layout needs tests

स्रोत

compmodder26

👍7

सबसे उपयोगी टिप्पणी

मैं समर्थन के लिए इस स्निपेट का उपयोग करता हूं, जो मेरे मामले के लिए काम करता है। ध्यान रखें कि यह उचित कार्यान्वयन से बहुत दूर है। ध्यान दें कि window आपका document.parentWindow होना चाहिए।

यदि आपको बेहतर कार्यान्वयन की आवश्यकता है, तो युक्ति का उपयोग करके कोड का विस्तार करें:
http://dev.w3.org/csswg/cssom-view/#dom -htmlelement-offsetleft

Object.defineProperties(window.HTMLElement.prototype, {
  offsetLeft: {
    get: function() { return parseFloat(window.getComputedStyle(this).marginLeft) || 0; }
  },
  offsetTop: {
    get: function() { return parseFloat(window.getComputedStyle(this).marginTop) || 0; }
  },
  offsetHeight: {
    get: function() { return parseFloat(window.getComputedStyle(this).height) || 0; }
  },
  offsetWidth: {
    get: function() { return parseFloat(window.getComputedStyle(this).width) || 0; }
  }
});

tobyhinloopen 27 दिस॰ 2014

👍47 ❤19 😕6 🎉4

सभी 32 टिप्पणियाँ

मुझे लगता है कि http://www.w3.org/TR/cssom-view/ को लागू करने की आवश्यकता होगी।

tmpvar 1 फ़र॰ 2011

हमने cssom को एकीकृत करना शुरू कर दिया है जिससे SVG की कुछ समस्याओं का समाधान होना चाहिए।

tmpvar 19 जून 2011

यह वास्तव में बहुत अच्छा होगा यदि हम ऑफ़सेट* गुणों तक पहुँच सकते हैं, कैनवास से संबंधित प्रोजेक्ट के लिए उनकी आवश्यकता होगी।

jgautheron 10 सित॰ 2011

इस मामले में प्रगति कैसी है? मैं हाईचार्ट्स के साथ बैकएंड सैग रेंडरिंग के लिए ऐसी सुविधा की भी सराहना करता हूं।

telesma 27 अक्तू॰ 2011

मुझे यह भी अच्छा लगेगा :)

damac23 15 नव॰ 2011

क्या आप लोगों के पास मदद करने के लिए कोई अतिरिक्त साइकिल है? व्यक्तिगत रूप से मुझे एसवीजी 1.1 की आवश्यकता नहीं है, लेकिन अगर आप लोगों को इस पर काम करने के लिए पर्याप्त रूप से निकाल दिया जाता है तो मैं इसे जमीन में मदद करने के लिए तैयार हूं।

tmpvar 16 नव॰ 2011

@tmpvar : मैं मदद करना चाहता हूं, लेकिन मैं उन सर्वर-साइड जेएस-सामानों के लिए काफी नया हूं।
हो सकता है कि आप मुझे संकेत दे सकें कि कहां से शुरू करना है और मैं कुछ पाने के लिए अपनी पूरी कोशिश कर सकता हूं :)

damac23 24 नव॰ 2011

सर्वर पर हाईचार्ट्स को सक्षम करने के लिए, मुझे एसवीजी 1.1 में भी बहुत दिलचस्पी है। मैं मदद की पेशकश करना चाहता हूं, लेकिन पहले मुझे एसवीजी 1.0 और जेएसडॉम में इसके वर्तमान कार्यान्वयन से परिचित होने की जरूरत है, जिसमें कुछ समय लग सकता है;)

href 28 नव॰ 2011

मुझे लगता है कि यहां पहला कदम परीक्षण सूट की एक प्रति प्राप्त करना है (http://www.w3.org/Graphics/SVG/WG/wiki/Test_Suite_Overview) और इसे हेडलेस में बदलना (जो काफी उपक्रम हो सकता है)

फिर हम एक level2/svg.js जोड़ सकते हैं और लागू करना शुरू कर सकते हैं।

मैं शायद अंततः इस पर पहुंच जाऊंगा, लेकिन यह अभी मेरी jsdom प्राथमिकताओं की सूची में उच्च नहीं है।

tmpvar 29 नव॰ 2011

@href svg 1.0 कार्यान्वयन बहुत नंगे है। यह level1/core में परीक्षण पास करता है लेकिन वास्तव में कुछ भी svg विशिष्ट लागू नहीं करता है।

tmpvar 29 नव॰ 2011

मुझे लगता है, getBoundingCLientRect सही ढंग से लागू नहीं हो रहा है।

मेरे पास विशिष्ट svg तत्व की गणना करने के लिए यह कोड है:

var html = '<!DOCTYPE html><html><head><title></title></head><body style="margin: 0; padding: 0;"><svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" style="margin: 0; padding: 0;"><rect style="" x="10" y="10" width="100" height="100" rx="0" ry="0"/></svg></body></html>';

        jsdom.env({
            html : html,
            src: [jquery],
            done: function (errors, window) {
                var $ = window.$;
                var clientBox = $("#svg").find(type)[0].getBoundingClientRect();
                console.log(clientBox);
            }
        });

और परिणाम है:

{ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }

लेकिन, अगर मैं वेब ब्राउज़र में उसी एचटीएमएल का परीक्षण करता हूं, तो परिणाम यह है:

{ bottom: 110, height: 100, left: 10, right: 110, top: 10, width: 100 }

throrin19 4 दिस॰ 2013

@ थ्रोरिन19 : #653 के माध्यम से पढ़ें।

JamesMGreene 4 दिस॰ 2013

तो क्या हासिल करना नामुमकिन है? अब तक मैं फैंटमजेएस के माध्यम से इस चिंता को दूर करने में कामयाब रहा लेकिन यह बेहद धीमा है और अगर मेरे पास एक बड़ा एसवीजी है, तो यह दुर्घटनाग्रस्त हो जाता है।

throrin19 4 दिस॰ 2013

मेरा मतलब है, यह असंभव नहीं है, लेकिन हमें एक संपूर्ण लेआउट इंजन लिखना होगा, और किसी के पास ऐसा करने का समय नहीं था।

domenic 4 दिस॰ 2013

👎2

मैंने इसके बारे में सोचा है, लेकिन फिर मेरे दिमाग में ऐंठन होती है और मुझे दूर जाना पड़ता है।

क्या एसिड के अलावा भी ऐसे परीक्षण हैं जिनका पालन किया जा सकता है?

tmpvar 5 दिस॰ 2013

+1 इसे एक अत्यधिक वांछनीय विशेषता खोजने पर

ghost 18 नव॰ 2014

Object.defineProperties(window.HTMLElement.prototype, {
  offsetLeft: {
    get: function() { return parseFloat(window.getComputedStyle(this).marginLeft) || 0; }
  },
  offsetTop: {
    get: function() { return parseFloat(window.getComputedStyle(this).marginTop) || 0; }
  },
  offsetHeight: {
    get: function() { return parseFloat(window.getComputedStyle(this).height) || 0; }
  },
  offsetWidth: {
    get: function() { return parseFloat(window.getComputedStyle(this).width) || 0; }
  }
});

tobyhinloopen 27 दिस॰ 2014

👍47 ❤19 😕6 🎉4

tobyhinloopen ने जो सुझाव दिया है, क्या उसके साथ किसी और को सफलता मिली है?

@tobyhinloopen : मेरी ग्राफ पृष्ठभूमि, अक्ष, और लेबल दिखाई देते हैं (यद्यपि एक तिरछे तरीके से) लेकिन बाकी अभी भी बहुत खराब है। क्या आप एक पूरा ग्राफ प्राप्त करने में सक्षम थे?

moni-ellevest 3 जन॰ 2015

मेरे पास एक अलग उपयोग का मामला था जहां मेरे सुझाए गए कार्यान्वयन ने काम किया। यदि यह आपके लिए काम नहीं करता है, तो इसे बढ़ाएँ। संभावित ऑफसेट ऊंचाई/चौड़ाई में पैडिंग भी शामिल होनी चाहिए। मैं इसे काम करने के लिए कुछ हैकी हॉटफिक्सिंग का सुझाव दूंगा, क्योंकि एक सही कार्यान्वयन को लागू करना मुश्किल है।

tobyhinloopen 3 जन॰ 2015

@tobyhinloopen द्वारा प्रस्तावित समाधान ठीक लगता है, लेकिन जब मैं इसका उपयोग करता हूं तो मुझे "संपत्ति को परिष्कृत नहीं किया जा सकता है"

zallek 19 जून 2016

👍1

@zallek मुझे लगता है कि आपके पास पहले से ही ऑफसेट लेफ्ट समर्थन है :) window.HTMLElement.prototype.offsetLeft लौटाता है? अगर यह कुछ भी है लेकिन अपरिभाषित है, तो मेरा समाधान काम नहीं करेगा

tobyhinloopen 20 जून 2016

बस धन्यवाद कहना चाहता था @tobyhinloopen , आपका समाधान मेरे लिए बहुत उपयोगी था। :)

tconroy 30 नव॰ 2016

👍2

@tobyhinloopen समाधान पोस्ट करने के लिए बहुत बहुत धन्यवाद! यह बहुत उपयोगी है और तब तक काम करता है जब तक मैं ऑफ़सेट का मान सेट करने के लिए एक चर का उपयोग करता हूं और this बाहर करता हूं। this अपरिभाषित आ रहा है, यह किस तरह का अर्थ है कि संदर्भ वास्तविक वर्ग नहीं है। क्या आप यही उम्मीद करेंगे?

jordantomax 19 मई 2019

❤1

@jordantomax यह फ़ंक्शन को कॉल करने पर तत्व से जुड़ा होता है, न कि जब फ़ंक्शन परिभाषित किया जाता है। जब आप इसे किसी HTML तत्व से कॉल कर रहे हों तो 'यह' तत्व होना चाहिए।

यदि ऐसा नहीं होता है, तो मुझे एक उदाहरण देखना अच्छा लगता है।

tobyhinloopen 19 मई 2019

@tobyhinloopen त्वरित प्रतिक्रिया के लिए धन्यवाद। मैं यही उम्मीद करूंगा। जब मैं वास्तविक ब्राउज़र वातावरण का उपयोग करके कोडसैंडबॉक्स में अपनी समस्या को पुन: पेश करने का प्रयास करता हूं, तो यह सही तरीके से काम करता है। लेकिन जेस्ट का उपयोग करते समय, मैं this को अपरिभाषित के रूप में देख रहा हूं। मैंने जो अनुभव किया है उसे दिखाने के लिए मैंने एक छोटा सा नमूना रेपो बनाया है, शायद मेरा सेटअप गलत है।

https://github.com/jordantomax/jest-htmlelement-prototype-sandbox

संबंधित, मुझे जेस्ट और jsdom का उपयोग करके scrollIntoView जैसी विधियों को ओवरराइड करने में भी समस्या हो रही है। क्या ऐसा करने का कोई अनुशंसित तरीका है?

आपकी मदद के लिए बहुत धन्यवाद!

jordantomax 22 मई 2019

मुझे लगता है कि ऐसा इसलिए है क्योंकि आप get: () => {} - () => {} फ़ंक्शन सिंटैक्स आपके this साथ गड़बड़ करता है। यदि आप इसके बजाय get() {} (अनुशंसित) या get: function() {} (वैकल्पिक) का उपयोग करते हैं, तो यह काम करेगा। @jordantomax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

आप अपने परीक्षण सूट के it / describe भी => का उपयोग करते हैं। मैं जेस्ट के बारे में नहीं जानता, लेकिन मोचा में इसकी अनुशंसा नहीं की जाती है, क्योंकि this आपके it / test / describe में सभी प्रकार के हैं यदि आप तीर फ़ंक्शन का उपयोग करते हैं तो आप उन उपयोगिताओं तक नहीं पहुंच सकते हैं। उदाहरण के लिए, मोचा में this.slow() , this.timeout(4000) आदि जैसी चीजें हैं।

https://mochajs.org/#arrow -functions

संबंधित, मुझे जेस्ट और jsdom का उपयोग करके स्क्रॉलइन्टोव्यू जैसे तरीकों को ओवरराइड करने में भी समस्या हो रही है। क्या ऐसा करने का कोई अनुशंसित तरीका है?

आमतौर पर एमडीएन पर किसी तरह का पॉलीफिल उपलब्ध होता है। अन्यथा, केवल उस युक्ति के आधार पर इसे लागू करने का प्रयास करें जो आपकी आवश्यकताओं के अनुरूप हो। यदि सब विफल हो जाता है, तो बस एक अलग परीक्षण वातावरण का उपयोग करें। JSDom का अपना स्थान है, लेकिन किसी बिंदु पर आप इसके बजाय एक वास्तविक ब्राउज़र पर विचार करना चाह सकते हैं। कई परीक्षण वातावरण वास्तविक ब्राउज़रों में परीक्षण की अनुमति देते हैं (यहां तक कि एक ही समय में गुणक भी) जबकि आपकी विकास मशीन को रीयलटाइम की रिपोर्ट भी करते हैं। IIRC कर्म यह करता है -> https://karma-runner.github.io/latest/index.html

मेरे मशीन पर एक साथ कई ब्राउज़र खुले हैं (फ़ायरफ़ॉक्स क्रोम सफारी इंटरनेट एक्सप्लोरर एज + सिमुलेटर में मोबाइल वाले), और वे सभी कर्मा + मोचा का उपयोग करके रीयलटाइम की सूचना देते हैं।

tobyhinloopen 23 मई 2019

@tobyhinloopen ठीक है आप सभी खातों पर हैं! शुक्रिया!! मैं अभी भी इस बारे में थोड़ा अस्पष्ट हूं कि getComputedStyle क्यों जरूरी है, और क्या उस विधि को एक सेटर लिखना संभव है। मेरे लिए यह काम करता प्रतीत होता है:

Object.defineProperties(window.HTMLElement.prototype, {
  offsetTop: {
    get () {
      return this.marginTop
    },
    set (offset) {
      this.marginTop = offset
    }
  }
})

पुनः धन्यवाद 🙏

jordantomax 24 मई 2019

@jordantomax getComputedStyle सभी CSS गुणों के लिए वास्तविक गणना शैली प्राप्त करता है, चाहे इसे कहीं भी लागू किया गया हो (स्टाइलशीट, style विशेषता या JS से)। मुझे यकीन नहीं है कि this.marginTop ऐसा ही करता है, लेकिन मुझे लगता है कि यह करता है (लेकिन केवल मार्जिन के लिए, सभी सीएसएस प्रोप के लिए नहीं)

tobyhinloopen 27 मई 2019

@tobyhinloopen आह, समझ गया। शुक्रिया!

jordantomax 29 मई 2019

धन्यवाद @tobyhinloopen । मैं और भी छोटे संस्करण का उपयोग करता हूं। मुझे लगता है कि getComputedStyle की वास्तव में आवश्यकता नहीं है क्योंकि मैं व्यक्तिगत रूप से कभी भी अपने यूनिट परीक्षणों में कोई सीएसएस नहीं जोड़ता जब तक कि यह इनलाइन न हो, यही कारण है कि .style पर्याप्त और तेज़ है।

Object.defineProperties(window.HTMLElement.prototype, {
  offsetLeft: {
    get () { return parseFloat(this.style.marginLeft) || 0 }
  },
  offsetTop: {
    get () { return parseFloat(this.style.marginTop) || 0 }
  },
  offsetHeight: {
    get () { return parseFloat(this.style.height) || 0 }
  },
  offsetWidth: {
    get () { return parseFloat(this.style.width) || 0 }
  }
})

ghost 21 मार्च 2020

👍3

क्या यह तय हो गया है, मुझे ऑफसेटविड्थ = 0 . मिल रहा है

   const dom = new JSDOM(`<!DOCTYPE html><body></body>`);
    let document = dom.window.document
    let span = document.createElement("span");
    span.innerHtml = 'test
    span.style.fontSize = 150 + 'px';
    span.style.fontFamily = 'Arial'
    document.body.appendChild(span)
    console.log(span.offsetWidth) // 0

petran 17 अक्तू॰ 2020

क्या यह तय हो गया है, मुझे ऑफसेटविड्थ = 0 . मिल रहा है

@petran यह उम्मीद करना यथार्थवादी नहीं है कि jsdom आपके SPAN की चौड़ाई की गणना करे, क्योंकि इसके लिए आपके फ़ॉन्ट के आकार और सभी विरासत में मिली CSS संपत्तियों के ज्ञान की आवश्यकता होती है। मुझे नहीं लगता कि यह JSDOM का लक्ष्य है। यदि आप किसी ब्राउज़र का अधिक सटीक अनुकरण चाहते हैं, तो वास्तविक ब्राउज़र का उपयोग करने पर विचार करें।

tobyhinloopen 17 अक्तू॰ 2020

👎1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Jsdom: ऑफ़सेटविड्थ, ऑफ़सेटहाइट, ऑफ़सेटटॉप, और ऑफ़सेट लेफ्ट

सबसे उपयोगी टिप्पणी

सभी 32 टिप्पणियाँ

संबंधित मुद्दों