هل هناك HTML معاكس لـ <noscript>؟

StackOverflow https://stackoverflow.com/questions/30319

  •  09-06-2019
  •  | 
  •  

سؤال

هل توجد علامة في HTML لن تعرض محتواها إلا في حالة تمكين JavaScript؟أنا أعرف <noscript> يعمل في الاتجاه المعاكس، ويعرض محتوى HTML الخاص به عند إيقاف تشغيل JavaScript.ولكنني أرغب فقط في عرض نموذج على موقع ما إذا كان JavaScript متاحًا، وإخبارهم عن سبب عدم قدرتهم على استخدام النموذج إذا لم يكن لديهم.

الطريقة الوحيدة التي أعرف كيفية القيام بذلك هي مع document.write(); في علامة البرنامج النصي، ويبدو الأمر فوضويًا بعض الشيء بالنسبة لكميات كبيرة من HTML.

هل كانت مفيدة؟

المحلول

يمكن أن يكون لديك قسم غير مرئي يتم عرضه عبر JavaScript عند تحميل الصفحة.

نصائح أخرى

أسهل طريقة يمكنني التفكير بها:

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

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

لا يوجد مستند كتابة ولا نصوص برمجية، CSS خالص.

لا أتفق حقًا مع جميع الإجابات هنا حول تضمين HTML مسبقًا وإخفائه باستخدام CSS حتى يتم عرضه مرة أخرى باستخدام JS.حتى بدون تمكين JavaScript، تظل هذه العقدة موجودة في DOM.صحيح أن معظم المتصفحات (حتى متصفحات إمكانية الوصول) ستتجاهلها، لكنها لا تزال موجودة وقد تكون هناك أوقات غريبة عندما يعود ذلك إليك.

الطريقة المفضلة لدي هي استخدام jQuery لإنشاء المحتوى.إذا كان المحتوى كبيرًا، فيمكنك حفظه كجزء HTML (فقط HTML الذي تريد إظهاره ولا يوجد أي من html أو النص أو الرأس أو ما إلى ذلك).العلامات) ثم استخدم وظائف ajax الخاصة بـ jQuery لتحميلها في الصفحة الكاملة.

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>

أولاً، افصل دائمًا بين المحتوى والترميز والسلوك!

الآن، إذا كنت تستخدم مكتبة jQuery (يجب عليك ذلك حقًا، فهي تجعل JavaScript أسهل كثيرًا)، فيجب أن تفعل الكود التالي:

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

سيعطيك هذا فئة إضافية في النص عند تمكين JS.الآن، في CSS، يمكنك إخفاء المنطقة عندما لا تكون فئة JS متاحة، وإظهار المنطقة عندما تكون JS متاحة.

بدلا من ذلك، يمكنك إضافة no-js كفئة افتراضية لعلامة جسمك، واستخدم هذا الرمز:

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

تذكر أنه لا يزال يتم عرضه إذا تم تعطيل CSS.

لدي حل بسيط ومرن، يشبه إلى حد ما حل Will's (ولكن مع ميزة إضافية تتمثل في كونه HTML صالحًا):

أعط عنصر الجسم فئة "jsOff".قم بإزالة (أو استبدال) هذا بـ JavaScript.اطلب من CSS إخفاء أي عناصر ذات فئة "jsOnly" مع عنصر أصل مع فئة "jsOff".

وهذا يعني أنه في حالة تمكين JavaScript، ستتم إزالة فئة "jsOff" من النص.هذا يعني أن العناصر ذات الفئة "jsOnly" لن يكون لها عنصر أصل من الفئة "jsOff" وبالتالي لن تتطابق مع محدد CSS الذي يخفيها، وبالتالي سيتم عرضها.

إذا تم تعطيل JavaScript، فئة "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.

يرجى ملاحظة أنه يجب تنفيذ JavaScript الذي يزيل فئة "jsOff" في أقرب وقت ممكن داخل علامة النص.لا يمكن تنفيذه مبكرًا، لأن علامة الجسم لن تكون موجودة بعد.لا ينبغي تنفيذه لاحقًا لأنه سيعني أن العناصر ذات الفئة "jsOnly" قد لا تكون مرئية على الفور (لأنها ستطابق محدد CSS الذي يخفيها حتى تتم إزالة الفئة "jsOff" من عنصر النص).

يمكن أن يوفر هذا أيضًا آلية لتصميم js فقط (على سبيل المثال. .jsOn .someClass{}) والتصميم بدون js فقط (على سبيل المثال. .jsOff .someOtherClass{}).يمكنك استخدامه لتوفير بديل ل <noscript>:

.jsOn .noJsOnly{
    display:none;
}

يمكنك أيضًا استخدام Javascript لتحميل المحتوى من ملف مصدر آخر وإخراجه.قد يكون هذا صندوقًا أسود أكثر قليلاً مما تبحث عنه.

فيما يلي مثال لطريقة div المخفية:

<!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 الضعيف، لكنك فهمت الفكرة.)

بلدي الحل

.CSS:

.js {
display: none;
}

.js:

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

.لغة البرمجة:

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

مقال اليكس يتبادر إلى ذهنك هنا، ومع ذلك فهو قابل للتطبيق فقط إذا كنت تستخدم ASP.NET - ويمكن محاكاته في JavaScript ولكن مرة أخرى سيتعين عليك استخدام document.write();

يمكنك ضبط مستوى رؤية الفقرة|div على "مخفي".

ثم في وظيفة "التحميل"، يمكنك ضبط مستوى الرؤية على "مرئي".

شيء مثل:

u003Cbody onload="javascript:document.getElementById(rec).style.visibility=visible" style=";text-align:right;direction:rtl">nu003Cp style="visibility:مرئي" id="rec">سيتم إخفاء هذا النص ما لم تتوفر جافا سكريبت.</p>

ليس هناك علامة لذلك.ستحتاج إلى استخدام جافا سكريبت لإظهار النص.

اقترح بعض الأشخاص بالفعل استخدام JS لتعيين CSS مرئيًا ديناميكيًا.يمكنك أيضًا إنشاء النص ديناميكيًا باستخدام document.getElementById(id).innerHTML = "My Content" أو إنشاء العقد ديناميكيًا، ولكن ربما يكون اختراق CSS هو الأكثر وضوحًا في القراءة.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top