क्या कोई HTML <noscript> के विपरीत है?

106

क्या HTML में कोई टैग है जो केवल जावास्क्रिप्ट सक्षम होने पर अपनी सामग्री प्रदर्शित करेगा? मुझे पता <noscript>है कि जावास्क्रिप्ट बंद होने पर इसकी HTML सामग्री को प्रदर्शित करते हुए, विपरीत तरीके से काम करता है। लेकिन मैं केवल एक साइट पर एक फॉर्म प्रदर्शित करना चाहूंगा यदि जावास्क्रिप्ट उपलब्ध है, तो उन्हें बताएं कि यदि उनके पास नहीं है तो वे फॉर्म का उपयोग क्यों नहीं कर सकते हैं।

एकमात्र तरीका मुझे पता है कि यह कैसे करना है यह document.write();एक स्क्रिप्ट टैग में विधि के साथ है , और यह HTML की बड़ी मात्रा के लिए थोड़ा गड़बड़ लगता है।

javascript html noscript

— Re0sless
स्रोत

56

जब पृष्ठ लोड होता है तो आपके पास एक अदृश्य div हो सकती है जो जावास्क्रिप्ट के माध्यम से दिखाई जाती है।

— ceejayoz
स्रोत

217

सबसे आसान तरीका जो मैं सोच सकता हूं:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

कोई डॉक्यूमेंट नहीं। कोई स्क्रिप्ट नहीं, शुद्ध सीएसएस।

— मर्जी
स्रोत

11

कम से कम एक्सएचटीएमएल मानक में अनुमति नहीं है।

— डायकम

29

@Dykam: यह HTML5 में अनुमत है: dev.w3.org/html5/spec/Overview.html#the-noscript-element और व्यवहार में, यह लगभग हर ब्राउज़र द्वारा समर्थित है।

— विल '

3

यह सलाह दी जाती है कि display: none !importantइसे अधिक विशिष्ट नियमों (जैसे आईडी या सीएसएस चयनकर्ताओं) द्वारा ओवरराइड करने से रोकने के लिए, इसका उपयोग स्क्रिप्ट के सक्षम होने पर इसके उपयोग के लिए किया जाता है।

— इस्टादोर

3

चेतावनी का एक शब्द: Chrome के वर्तमान संस्करण <noscript>प्राथमिकताओं में जावास्क्रिप्ट को अक्षम करने के बाद किसी पृष्ठ को रीफ़्रेश करने के बाद पहली बार के अंदर टैग को पार्स नहीं करते हैं। आपको इसे काम करने के लिए दो बार पुनः लोड करने की आवश्यकता है।

— तोबिया

2

साफ, संक्षिप्त, जावास्क्रिप्ट का उपयोग नहीं करता है। मुझें यह पसंद है।

— ड्रैगस

8

मैं वास्तव में HTML के पहले से एम्बेड करने और इसे CSS के साथ छुपाने के बारे में यहाँ सभी उत्तरों से सहमत नहीं हूँ जब तक कि इसे JS के साथ फिर से नहीं दिखाया गया है। यहां तक कि w / o जावास्क्रिप्ट सक्षम है, वह नोड अभी भी DOM में मौजूद है। सच है, अधिकांश ब्राउज़र (यहां तक कि एक्सेसिबिलिटी ब्राउज़र) इसे अनदेखा कर देंगे, लेकिन यह अभी भी मौजूद है और विषम समय हो सकता है जब यह आपको वापस काटने के लिए आता है।

मेरा पसंदीदा तरीका सामग्री उत्पन्न करने के लिए jQuery का उपयोग करना होगा। यदि यह बहुत सारी सामग्री होगी, तो आप इसे HTML टुकड़े के रूप में सहेज सकते हैं (बस HTML जिसे आप दिखाना चाहते हैं और HTML, बॉडी, हेड इत्यादि में से कोई भी टैग नहीं होगा) तो इसे लोड करने के लिए jQuery के ajax फ़ंक्शन का उपयोग करें पूरा पृष्ठ।

test.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
       $.get('_test.html', function(html) {
         $('p:first').after(html);
       });
     });
    </script>
</head>
<body>
  <p>This is content at the top of the page.</p>
  <p>This is content at the bottom of the page.</p>
</body>
</html>

_test.html

<p>This is from an HTML fragment document</p>

परिणाम

<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>

— क्रिस ब्लूम
स्रोत

8

सबसे पहले, हमेशा अलग सामग्री, मार्कअप और व्यवहार!

अब, यदि आप jQuery लाइब्रेरी का उपयोग कर रहे हैं (आप वास्तव में करना चाहिए, तो यह जावास्क्रिप्ट को बहुत आसान बनाता है), निम्न कोड करना चाहिए:

$(document).ready(function() {
    $("body").addClass("js");
});

यह आपको जेएस सक्षम होने पर शरीर पर एक अतिरिक्त कक्षा देगा। अब, CSS में, आप उस क्षेत्र को छिपा सकते हैं जब JS क्लास उपलब्ध नहीं है, और JS उपलब्ध होने पर क्षेत्र को दिखाएँ।

वैकल्पिक रूप से, आप no-jsअपने बॉडी टैग में डिफ़ॉल्ट वर्ग के रूप में जोड़ सकते हैं , और इस कोड का उपयोग कर सकते हैं :

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

याद रखें कि यह अभी भी प्रदर्शित किया जाता है यदि सीएसएस अक्षम है।

— alexanderpas
स्रोत

3

मेरे पास एक सरल और लचीला समाधान है, कुछ हद तक विल के समान है (लेकिन वैध HTML होने के अतिरिक्त लाभ के साथ):

शरीर के तत्व को "jsOff" का एक वर्ग दें। इसे जावास्क्रिप्ट से निकालें (या बदलें)। सीएसएस को "jsOly" के वर्ग के साथ मूल तत्व के साथ "jsOnly" के वर्ग के साथ किसी भी तत्व को छिपाने के लिए है।

इसका मतलब यह है कि यदि जावास्क्रिप्ट सक्षम है, तो "jsOff" वर्ग को शरीर से हटा दिया जाएगा। इसका मतलब यह होगा कि "jsOnly" के वर्ग वाले तत्वों के पास "jsOff" के वर्ग के साथ माता-पिता नहीं होंगे और इसलिए सीएसएस चयनकर्ता से नहीं होगा जो उन्हें छुपाता है, इस प्रकार उन्हें दिखाया जाएगा।

यदि जावास्क्रिप्ट अक्षम है, तो "jsOff" वर्ग को निकाय से हटाया नहीं जाएगा। "JsOnly" के साथ तत्वों जाएगा "jsOff" के साथ एक माता पिता है और इसलिए होगा CSS चयनकर्ता कि उन्हें खाल, इस तरह वे छिपा दिया जाएगा मेल खाते हैं।

यहाँ कोड है:

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff','jsOn');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

यह मान्य HTML है। यह आसान है। यह लचीला है।

बस "jsOnly" वर्ग को किसी भी तत्व में जोड़ें जिसे आप केवल तब प्रदर्शित करना चाहते हैं जब JS सक्षम हो।

कृपया ध्यान दें कि "jsOff" क्लास को हटाने वाले जावास्क्रिप्ट को बॉडी टैग के अंदर जल्दी से जल्दी निष्पादित किया जाना चाहिए। इसे पहले निष्पादित नहीं किया जा सकता है, क्योंकि बॉडी टैग अभी तक नहीं होगा। इसे बाद में निष्पादित नहीं किया जाना चाहिए क्योंकि इसका मतलब होगा कि "jsOnly" वर्ग वाले तत्व अभी दिखाई नहीं दे सकते हैं (क्योंकि वे सीएसएस चयनकर्ता से मेल खाएंगे जो उन्हें तब तक छुपाता है जब तक कि "jsOff" वर्ग को शरीर तत्व से हटा नहीं दिया जाता)।

यह js-only स्टाइलिंग (जैसे .jsOn .someClass{}) और no-js-only स्टाइलिंग (जैसे .jsOff .someOtherClass{}) के लिए एक तंत्र भी प्रदान कर सकता है । आप इसका उपयोग करने के लिए एक विकल्प प्रदान कर सकते हैं <noscript>:

.jsOn .noJsOnly{
    display:none;
}

— Spycho
स्रोत

1

आप किसी अन्य स्रोत फ़ाइल से सामग्री लोड करने के लिए जावास्क्रिप्ट का उपयोग भी कर सकते हैं और आउटपुट भी। हालांकि आप के लिए देख रहे हैं की तुलना में थोड़ा अधिक ब्लैक बॉक्स-हो सकता है।

— स्मर्फ
स्रोत

1

यहाँ छिपे हुए रास्ते के लिए एक उदाहरण है:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>

(आपको शायद गरीब IE के लिए इसे ट्वीक करना होगा, लेकिन आपको इसका विचार है।)

— Shadow2531
स्रोत

1

मेरा समाधान

.css:

.js {
display: none;
}

.js:

$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});

.html:

<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>

— prgDevelop
स्रोत

अपने HTML उदाहरण में, आप लाइनों को </ span> से समाप्त नहीं करना चाहते हैं?

— कर्क

0

एलेक्स का लेख यहाँ ध्यान में रखता है, हालाँकि यह केवल तभी लागू होता है जब आप ASP.NET का उपयोग कर रहे होते हैं - यह जावास्क्रिप्ट में अनुकरणीय हो सकता है लेकिन फिर से आपको document.write () का उपयोग करना होगा;

— रॉस
स्रोत

0

आप एक पैराग्राफ की दृश्यता निर्धारित कर सकते हैं।

फिर 'ऑनलोड' फ़ंक्शन में, आप दृश्यता को 'दृश्यमान' पर सेट कर सकते हैं।

कुछ इस तरह:

<body onload = "javascript: document.getElementById (rec) .style.visibility = दृश्यमान"> <p style = "दृश्यता: दृश्यमान" id = "rec"> यह पाठ तब तक छिपाया जाएगा जब तक कि जावास्क्रिप्ट उपलब्ध न हो। </ p>

0

उसके लिए कोई टैग नहीं है। पाठ दिखाने के लिए आपको जावास्क्रिप्ट का उपयोग करना होगा।

कुछ लोगों ने जेएस का उपयोग करके पहले से ही सीएसएस को गतिशील रूप से सेट करने का सुझाव दिया। आप डायनामिक रूप से document.getElementById(id).innerHTML = "My Content"या डायनामिक रूप से नोड्स बनाने के साथ टेक्स्ट भी उत्पन्न कर सकते हैं, लेकिन सीएसएस हैक शायद पढ़ने के लिए सबसे सरल है।

— सीपीएम
स्रोत

0

इस प्रश्न के पूछे जाने के दशक में, HIDDENविशेषता HTML में जोड़ दी गई थी। यह सीएसएस का उपयोग किए बिना तत्वों को सीधे छिपाने की अनुमति देता है। सीएसएस-आधारित समाधान के साथ, तत्व को स्क्रिप्ट द्वारा अन-छिपाना चाहिए:

<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>

— चक
स्रोत