<स्क्रिप्ट> टैग कब दिखाई दे सकते हैं और क्यों चाहिए?

Question

एक scriptतत्व जो स्टाइल हो गया जैसा display:blockदिखाई देता है। यह क्यों संभव है और क्या कोई वास्तविक उपयोग मामला है जहां यह वांछित है?

td > * {
  display: block;
}

<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>

Comments

मैंने <style>सामग्री संपादन योग्य के साथ एक दृश्यमान सीएसएस देखा है । वास्तविक समय में प्रभाव देखने का अच्छा तरीका।

— जॉन ड्वोरक

अपनी अगली चुनौती के लिए, टिप्पणियों को दृश्यमान बनाने का एक तरीका तैयार करें।

— मिस्टर लिस्टर

इसी बात का जिक्र करने के लिए यहां आए, @JDDvorak। पहली बार जब मैंने इसे देखा था, तो मेरा ब्लीड करें। मुझे कोडपेन

— श्मिट

जब मुझे लुसी एक जादू पढ़ता है जो असलान को दिखाई देता है, तो वह द वेज ऑफ द डॉन ट्रीडर की याद दिलाता है , और वह आश्चर्यचकित है कि जादू उसे प्रभावित करेगा , और वह मूल रूप से कहता है, क्या आपको लगता है कि मैं अपने स्वयं के नियमों की अवहेलना करूंगा?

— डेविड कॉनराड

मैं यह सोचकर यहाँ आया था कि यह एक बुनियादी सवाल था और कुछ नया सीखना बाकी था। I <3 sof।

— १२:२० बजे जैक्सनक्राट

Answer 1

HTML5 विनिर्देश एक शैली शीट को परिभाषित करता है जिसका उपयोग उपयोगकर्ता एजेंट (ब्राउज़र की तरह) करने की अपेक्षा की जाती है। धारा 10.3.1 "छिपे हुए तत्वों" की शैलियों को सूचीबद्ध करती है:

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

जैसा कि आप देख सकते हैं, यह लागू होता display: none;है script।

यह आपके उपयोगकर्ताओं और छिपे हुए scriptतत्वों के बीच एकमात्र "बाधा" है । यह पूरी तरह से ठीक है और लेखक की शैली की चादरों के भीतर उपयोगकर्ता-एजेंट शैली शीट से शैलियों को ओवरराइट करने में सक्षम होने का इरादा रखता है (और निश्चित रूप से उपयोगकर्ता शीट के भीतर भी)।

कोई इसका उपयोग क्यों करना चाहेगा? एक उपयोग मामला पुराने तत्व के समान / जैसे वर्ण से बचने के लिए सामग्री प्रदर्शित कर रहा है<>xmp । scriptतत्व न केवल स्क्रिप्ट के लिए है, लेकिन इस्तेमाल किया जा सकता भी डेटा ब्लॉक के लिए (अर्थात एक MIME प्रकार के साथ कुछ भी करने के लिए)।

Comments

डेटा को पहले से ही कोडित किया जाना है <script>- डेटा ब्लॉक द्वारा लोड नहीं किया जा सकता है src।

@PauliSudarshanTerho: हाँ, यदि डेटा ब्लॉक के रूप में उपयोग किया जाता है, तो तत्व srcपर विशेषता की अनुमति नहीं scriptहै।

— 1

Answer 2

<script>टैग क्यों दिखाई दे सकते हैं ?

क्योंकि वे किसी अन्य की तरह एचटीएमएल तत्व हैं और सीएसएस को लागू करने से रोकने के लिए एचटीएमएल विनिर्देश (जो जटिलता को जोड़ देगा) में विशेष मामले के नियम लिखने का कोई कारण नहीं है।

किसी भी तत्व को स्टाइल किया जा सकता है। उदाहरण के लिए:

head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }

क्या कोई यूसेकस है जहाँ वह चाहता है?

निश्चित रूप से कोई भी सामान्य नहीं है, लेकिन सामान्य नियम हर उस चीज के लिए समझ में नहीं आते हैं जिसे आप उन्हें लागू कर सकते हैं। वे सामान्य मामलों के लिए डिज़ाइन किए गए हैं।

Comments

वास्तव में यदि आप क्रोम इंस्पेक्टर में एक स्क्रिप्ट टैग देखते हैं, तो आप देखते हैंuser agent stylesheet: script {display:none}

— नीट द डार्क एबोल जूल

मैं चाहता हूँ कि "किसी भी अन्य की तरह डोम तत्व"। वास्तव में वे अपने पार्सिंग नियमों के साथ काफी विशेष HTML टैग हैं।

— बर्गी जूल

मजेदार तथ्य: चूंकि स्क्रिप्ट सामग्री सीडीएटीए के रूप में पार्स की जाती है, आप पूर्व की <script type="text/plain">तरह उपयोग कर सकते हैं <xmp>, लेकिन फिर भी डब्ल्यू 3 सी सत्यापनकर्ता के साथ संगत हो सकते हैं।

— मिस्टर लिस्टर

script {display: block !important;}जब कोई विशेष केस नियम नहीं है तो काम क्यों नहीं करता है?

— वुत्जेबेर

@wutzebaer यह मेरे लिए ठीक काम करता है। क्या आप वाकई सब कुछ ठीक कर रहे हैं? ध्यान दें कि scriptटैग एक दृश्य तत्व में भी होना चाहिए - यह केवल आपको scriptशरीर में दिखाएगा , उदाहरण के लिए headडिफ़ॉल्ट रूप से नहीं।

— लुआं

Answer 3

एक और (आम नहीं) उपयोग मामला:

मैं कभी-कभी <script>स्टाइल गाइड में संक्षिप्त HTML कोड उदाहरणों के लिए टैग का उपयोग करता हूं । इस तरह मुझे HTML टैग और विशेष वर्ण से बचना नहीं है। और पाठ संपादक टैग स्वत: पूर्ण और वाक्य रचना हाइलाइटिंग अभी भी काम करते हैं। लेकिन ब्राउज़र में सिंटैक्स हाइलाइटिंग को जोड़ने का कोई आसान तरीका नहीं है।

script[type="text/example"] {
    background-color: #33373c;
    border: 1px solid #ccc;
    color: #aed9ef;
    display: block;
    font-family: monospace;
    overflow: auto;
    padding: 2px 10px 16px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}

<p>Here comes a code example:</p>
<script type="text/example">
  <div class="cool-component">
     Some code example
  </div>
</script>

Comments

बुरा नहीं है, हालांकि मैं एक मान्य MIME- प्रकार का उपयोग करने का सुझाव दूंगा: text/htmlऔर class="codesample"शैलियों को लागू करने के लिए कुछ का उपयोग करना । सिर्फ पांडित्य कारणों के लिए: D

— नीट द डार्क एबसोल

@NiettheDarkAbsol: यह शायद "वास्तविक" माइम प्रकार (या कुछ भी जो भविष्य में एक हो सकता है) का उपयोग करने के लिए सुरक्षित नहीं है, बस किसी दिन कोई ब्राउज़र किसी तरह से उस प्रकार के स्क्रिप्ट तत्वों को पार्स और निष्पादित करने का निर्णय ले सकता है। उस ने कहा, मैं x-कस्टम प्रकार के लिए मानक उपसर्ग का उपयोग करना पसंद करूंगा , अर्थात इसे बनाऊंगा text/x-example।

— इल्मरी करोनें

Answer 4

संभावित उपयोग मामला: डीबगिंग उद्देश्यों के लिए।

आप दस्तावेज़ स्तर पर एक वर्ग लागू कर सकते हैं, जैसे। <body class="debugscript">, तो कुछ सीएसएस का उपयोग करें:

body.debugscript script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
}
body.debugscript script:before {
    content: 'Script:';
    display: block;
    font-weight: bold;
}
body.debugscript script[src]:before {
    content: 'Script: ' attr(src);
}

Comments

क्यों नहीं <html class="debugscript">?

— बर्गी जूल

@Bergi यह एक विकल्प भी है, हालांकि यह शायद <head>स्क्रिप्ट को प्रकट नहीं करेगा क्योंकि <head>खुद के पास भी है display:noneइसलिए आपको जबरन उसे प्रकट करने की आवश्यकता होगी, जिससे आगे की जटिलताएं हो सकती हैं।

— नीट द डार्क एबसोल

आपका मतलब है "आगे मज़ा" या "आगे डिबगिंग की क्षमता" :-)

— बर्गी

Answer 5

स्क्रिप्ट टैग का उपयोग करके डिफ़ॉल्ट रूप से छिपाया जाता है display:none;। Unor ¹ अंतर्निहित भाषा विनिर्देश की व्याख्या करता है। हालाँकि, वे अभी भी DOM का हिस्सा हैं और तदनुसार स्टाइल किया जा सकता है।

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

एक बार स्क्रिप्ट निष्पादित हो जाने के बाद, टैग की सामग्री पृष्ठ पर केवल पाठ (अक्सर छिपी) होती है। यह पाठ प्रकट किया जा सकता है, लेकिन इसे हटाया भी जा सकता है क्योंकि यह केवल पाठ है।

समापन </html>टैग से ठीक पहले आपके पृष्ठ के निचले भाग में , आप बहुत आसानी से उनके पाठ के साथ इन टैगों को हटा सकते हैं और पृष्ठ में कोई परिवर्तन नहीं होगा।

उदाहरण के लिए:

(function(){
    var scripts = document.querySelectorAll("script");
    for(var i = 0; i < scripts.length; i++){
        scripts[i].parentNode.removeChild(scripts[i]);
    }
})()

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

_{1. unor, Thu Jul 07 2016, wutzebaer, "टैग कब दिखाई देने चाहिए और वे क्यों कर सकते हैं?", Jul 1 at 10:53, https://stackoverflow.com/a/38147398/1026459}