IE 6 में HTML5 कस्टम डेटा विशेषताएँ "काम" करती हैं?

Question

कस्टम डेटा विशेषताएँ: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-vanish-data

जब मैं कहता हूं "काम", मेरा मतलब है, अगर मुझे इस तरह से HTML मिल गया है:

<div id="geoff" data-geoff="geoff de geoff">

निम्नलिखित जावास्क्रिप्ट होगा:

var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);

IE 6 में उत्पादन, इसमें "जियोफ़ डे जियॉफ़" के साथ एक चेतावनी?

Comments

HTML5 और IE6? आतंक ... O_o

— विविन पालीथ

ध्यान दें कि data-geoff"-" वर्ण के कारण मान्य JS पहचानकर्ता नहीं है। आपको dataGeoffस्क्रिप्ट में उपयोग करने की आवश्यकता होगी ।

— आउट

@outis: चश्मा (ड्राफ्ट में) के अनुसार, आपका मतलब है? मैंने खुद को एफएफ 3.6 और क्रोमियम 5.0.307.11 में इसका परीक्षण किया और पुनर्प्राप्त करने से geoff.dataGeoffकाम नहीं चला। यह निकला ( whatwg.org/specs/web-apps/current-work/multipage/… ) कि यह होना चाहिए geoff.dataset.geoff, लेकिन जैसा कि आधुनिक ब्राउज़रों में element.datasetअभी भी undefinedहै, यह न तो समर्थित है।

— मार्सेल कोर्पल

जेफ्थ, नीटीन जेफ्टी-जेफ का प्रभाव।

— मैट सच

@ANeves: जबकि वह किसी को गैर-पहचानकर्ता वर्णों के साथ एक संपत्ति तक पहुंचने की अनुमति देता है, यह यहां लागू नहीं होता है क्योंकि ब्राउज़र डोम में समान नाम की संपत्ति के साथ 'डेटा-जियोफ़' एचटीएमएल विशेषता को पुल नहीं करेगा।

— outis

Answer 1

आप कस्टम (या अपने खुद के) विशेषताओं के मूल्यों को पुनः प्राप्त कर सकते हैं getAttribute। अपने उदाहरण के साथ

<div id="geoff" data-geoff="geoff de geoff">

मैं का मूल्य प्राप्त कर सकते हैं data-geoffका उपयोग कर

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

MSDN देखें । और यद्यपि यह वहाँ उल्लेख किया गया है कि आपको इसे काम करने के लिए IE7 की आवश्यकता है, मैंने कुछ समय पहले IE6 के साथ इसका परीक्षण किया था और यह सही ढंग से कार्य किया था (यहां तक ​​कि quirks मोड में)।

लेकिन इसका HTML5- विशिष्ट विशेषताओं से कोई लेना-देना नहीं है, बेशक।

Comments

पूरी तरह से, यह एचटीएमएल 5 डेटा विशेषताओं का वास्तविक समर्थन नहीं है। हालांकि उन्हें उपयोग करने के लिए एक तरह से ध्वनि करता है।

— पॉल डी। वेट

यह सही है कि डेटा के एपीआई को एक संग्रह में चीजें डालने या जो कुछ भी (इस हाँ का समर्थन नहीं करता) का समर्थन नहीं करता है। हालाँकि, जैसा कि गेट / सेट एट्रीब्यूट द्वारा दिखाया गया है, आप डेटा का मुख्य उपयोग- किसी भी न्यूनतम डोम अवगत ब्राउज़र में तुरंत कर सकते हैं। यदि आप लापता संग्रह बनाने के लिए इच्छुक हैं तो आप शायद बंदर पैच ब्राउज़र भी देख सकते हैं। मेरे हालिया पुस्तक प्रयोगों से यह स्पष्ट है कि डेटा-विशेषताएँ अब उपयोग करने योग्य हैं और स्टाइल जानकारी और यादृच्छिक मेटा डेटा को रखने के लिए क्लास विशेषता मान को ओवरलोड करने की वर्तमान सामान्य योजना से बहुत बेहतर हैं।

— थॉमस पॉवेल

"अगर आप लापता संग्रह बनाने के लिए इच्छुक हैं तो आप संभवतः बंदर पैच ब्राउज़र भी देख सकते हैं।" - हाँ, यह सीएसएस की तुलना में जावास्क्रिप्ट के बारे में अच्छी बात है: क्योंकि यह एक प्रोग्रामिंग भाषा है, आप संगतता समस्याओं को स्वयं ठीक कर सकते हैं।

— पॉल डी। वेइट

मैं वास्तव में आश्चर्यचकित हूं कि यह उत्तर अभी भी बहुत अधिक श्रेय जाता है, विशेष रूप से IE 6 को "मृत" माना जाना चाहिए, कई वेब डेवलपर्स के अनुसार।

— मार्सेल कोरपेल

@ मार्सेल: मुझे लगता है कि अभी भी कुछ साइटों में IE 6 उनके दर्शकों के गैर-नगण्य हिस्से के रूप में है। हो सकता है कि अगले 10 वर्षों में हमें कोई चिंता नहीं करनी पड़ेगी।

— पॉल डी। वेट

Answer 2

हां, वे काम करते हैं।

IE ने getAttribute()IE4 से समर्थन किया है, जो कि jQuery आंतरिक रूप से उपयोग करता है data()।

data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js

तो आप या तो jQuery की .data()विधि या सादे वेनिला जावास्क्रिप्ट का उपयोग कर सकते हैं :

नमूना HTML

<div id="some-data" data-name="Tom"></div>

जावास्क्रिप्ट

var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);

jQuery

var name = $("#some-data").data("name");

Comments

यह उत्तर canIuse के साथ थोड़ा संघर्ष करता है। इस पर कोई इनपुट क्यों इसे "आंशिक रूप से" के रूप में चिह्नित किया गया है? caniuse.com/dataset

— स्नेक

@ मुझे लगता है कि यह नीचे के नोट से संबंधित हैNote: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.

— मार्को

@Marko के बारे में क्या <div lala="Tom"></div>, IE6 में यह ठीक होगा? आप मूल्य कैसे पढ़ेंगे?

— रॉय नमिर

@RoyiNamir मेरा मानना ​​है कि इसे किसी भी विशेषता के साथ ठीक काम करना चाहिए, लेकिन आप सबसे अच्छी जांच करें। मेरे पास कहीं भी IE6 काम नहीं है।

— मार्को

मैं चाहता हूं कि jquery बस चली जाए

— SuperUberDuper

Answer 3

न केवल IE6 HTML5 डेटा विशेषता विशेषता का समर्थन नहीं करता है, वास्तव में नहीं वर्तमान ब्राउज़र उन्हें समर्थन करता है! फिलहाल एकमात्र अपवाद क्रोम है।

आप data-geoff="geoff de geoff"एक विशेषता के रूप में उपयोग करने के लिए पूरी तरह से स्वतंत्र हैं , लेकिन वर्तमान ब्राउज़र संस्करणों में से केवल क्रोम आपको देगा.dataGeoff संपत्ति देगा।

सौभाग्य से, सभी वर्तमान ब्राउज़र - IE6 सहित - मानक DOM .getAttribute()विधि का उपयोग करके अज्ञात विशेषताओं को संदर्भित कर सकते हैं , इसलिए.getAttribute("data-geoff") हर जगह काम करेंगे।

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

आप CanIUse.com पर इस सुविधा के लिए समर्थन की वर्तमान स्थिति के बारे में अधिक देख सकते हैं ।

उम्मीद है की वो मदद करदे।

Comments

"न केवल IE6 HTML5 डेटा विशेषता विशेषता का समर्थन नहीं करता है, वास्तव में कोई वर्तमान ब्राउज़र उन्हें समर्थन नहीं करता है" - निश्चित रूप से, हालांकि यह "समर्थन" की आपकी परिभाषा पर निर्भर करता है। कोई भी ब्राउज़र datasetसंपत्ति का समर्थन नहीं करता है , लेकिन सभी ब्राउज़र आपको उपसर्ग के साथ विशेषताओं में डेटा संग्रहीत करने की अनुमति देते हैं data-, और (जैसा कि आप कहते हैं) इसके माध्यम से पुनर्प्राप्त करते हैं getAttribute। तो एक अर्थ में वे सुविधा का समर्थन करते हैं, क्योंकि आप विशेषताओं का प्रभावी ढंग से उपयोग कर सकते हैं।

— पॉल डी। वेट

मैं आपकी बात देख रहा हूं कि datasetउन्हें उपयोग करने के लिए संपत्ति का उपयोग करने का कोई कारण नहीं है, हालांकि - मुझे नहीं पता कि यह क्या लाभ प्रदान करने वाला है getAttribute।

— पॉल डी। वेट

@Paul - यह getAttribute पर कोई लाभ प्रदान नहीं करता है। विशेषताओं के उपयोग से टैग के विरुद्ध डेटा संग्रहीत करने के लिए यह एक मानक तरीका है। यह हमेशा काम किया है, लेकिन HTML5 तक आधिकारिक मानक कभी नहीं था। एचटीएमएल 5 ने केवल एक मौजूदा गैर-मानक लेकिन व्यापक रूप से इस्तेमाल की जाने वाली सुविधा ली और इसे अनुसमर्थित किया, यह कहते हुए कुछ नियम जोड़े कि आपको उन्हें कैसे नाम देना चाहिए, और उन्हें एक्सेस करने के लिए एक नया तरीका निर्धारित करना चाहिए। जब मैं कहता हूं कि यह समर्थित नहीं है, तो मैं स्पष्ट रूप से .dataXYZगुणों का उल्लेख कर रहा हूं ; जैसा कि आप कहते हैं, बुनियादी कार्यक्षमता व्यापक रूप से समर्थित है, लेकिन इसलिए नहीं कि यह HTML5 है।

— स्पडली

Answer 4

मुझे लगता है कि IE ने हमेशा इसका समर्थन किया है (कम से कम IE4 से शुरू) और आप उन्हें JS से एक्सेस कर सकते हैं। उन्हें 'विस्तार गुण' कहा जाता था। देखपुराना MSDN लेख

इस व्यवहार को DOM तत्व पर गलत करने के लिए विस्तारक गुण सेट करके अक्षम किया जा सकता है (यह डिफ़ॉल्ट रूप से सत्य है, इसलिए विस्तारक गुण डिफ़ॉल्ट रूप से काम करते हैं)।

संपादित करें: URL तय किया

Comments

आह, हाँ क्षमा करें, मुझे नहीं लगता कि यह मेरा उद्देश्य है। सिर्फ स्पष्ट करने के लिए प्रश्न को संपादित किया।

— पॉल डी। वेट

मुझे माफ करना, लिंक गलत था। इसने बताया कि फीचर को समझाने के बजाय इस व्यवहार को कैसे निष्क्रिय किया जाए। मैंने लिंक और पाठ तय कर लिया है।

— तैमूर

getAttribute क्रॉस-ब्राउज़र का काम करता है, यहाँ IE quirks पर भरोसा करने की कोई आवश्यकता नहीं है।

— मूर्ख

बहुत बड़िया धन्यवाद। अच्छा लेख भी, प्यार "पहले DHTML दोस्त कॉलम में आपका स्वागत है।"

— पॉल डी। वेइट

Answer 5

यदि आप नए ब्राउज़र में डेटासेट संपत्ति की तरह एक बार में सभी कस्टम डेटा विशेषताओं को पुनर्प्राप्त करना चाहते हैं, तो आप निम्न कार्य कर सकते हैं। यह वही है जो मैंने किया और मेरे लिए +7 + में बहुत अच्छा काम किया।

function getDataSet(node) {
    var dataset = {};
    var attrs = node.attributes;
    for (var i = 0; i < attrs.length; i++) {
        var attr = attrs.item(i);
        // make sure it is a data attribute
        if(attr.nodeName.match(new RegExp(/^data-/))) {
            // remove the 'data-' from the string 
            dataset[attr.nodeName.replace(new RegExp('^data-'), '')] = attr.nodeValue;
        }
    }
    return dataset;
}

Answer 6

में IE6 , यह काम नहीं कर सकते हैं। संदर्भ के लिए: MSDN

मैं अधिकांश मामलों को संभालने के लिए jQuery का उपयोग करने का सुझाव देता हूं:

var geoff = $("#geoff").data("data-geoff");
alert(geoff);

अपने कोडिंग में यह प्रयास करें।

Comments

IE6 में, यह काम करता है ( स्वीकृत उत्तर देखें ), और मैंने jQuery के बारे में नहीं पूछा।

— पॉल डी। वेइट

@Paul डी। वेट: क्षमा करें, मैंने गलती से आपके स्पैम ध्वज को अस्वीकार कर दिया। यह संदिग्ध लग रहा है।

— BoltClock

@ बॉलकॉक: यह काफी ठीक है। कोड का सुझाव वास्तव में कुछ हद तक उचित है, लेकिन समाचार रीडर लिंक स्पष्ट रूप से पूरी तरह से असंबंधित है।

— पॉल डी। वेट

फिर 4 साल बाद भी यहां क्यों है?

— दान पेंट्री