كيفية إخفاء أجزاء من HTML عندما يتم تعطيل JavaScript؟

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

  •  21-09-2019
  •  | 
  •  

سؤال

أحاول استيعاب المستخدمين بدون JavaScript. (بالمناسبة ، هل يستحق الجهد في الوقت الحاضر؟)

في ملف HTML واحد ، أود تنفيذ جزء منه إذا كانت البرامج النصية تشغيل, وجزء آخر إذا كانت البرامج النصية متوقفة.

ال <noscript> تتيح لي Tag القيام بالأوائل ، ولكن كيف أحقق هذا الأخير؟ كيف يمكنني وضع علامة على جزء من HTML بحيث لا يتم تحليله بواسطة المتصفح إذا كانت البرامج النصية إيقاف?

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

المحلول

إليك برنامج تعليمي للفيديو حول كيفية القيام بذلك باستخدام jQuery: http://screenr.com/ya7

شفرة:

<body class="noscript">
<script>
$('body').removeClass('noscript');
</script>
</body>

ثم فقط إخفاء العناصر ذات الصلة تحت body.noscript وفقاً لذلك.

تعديلومع ذلك ، قد يتم انتفاخ jQuery لإصلاح صغير مثل هذا ، لذلك أقترح إجابة Zauber Paracelsus لأنه لا يتطلب jQuery.

نصائح أخرى

كنت أبحث حول طريقة للقيام بذلك حتى أتمكن من إخفاء قائمة منسدلة التنقل التي تصبح غير وظيفية عند تمكين JavaScript. ومع ذلك ، فإن جميع الحلول لتغيير خاصية العرض لم تنجح.

لذلك ، تم تعيين ما فعلته أولاً معرف (ddown) لعنصر DIV المحيط بقائمة القائمة المنسدلة.

ثم ، داخل قسم الرأس من مستند HTML ، أضفت هذا في:

<noscript>
    <style>
        #ddown {display:none;}
    </style>
</noscript>

وهذا عمل فقط. لا توجد اعتماد على javaScript أو jQuery أو أي برمجة أخرى: فقط HTML و CSS.

الافتراضية البتات التي تريد إخفاءها على أنها مصممة display:none وقم بتشغيلها مع jQuery أو JavaScript.

بالمناسبة ، هل يستحق الجهد في الوقت الحاضر؟

نعم ، يجدر القلق بشأن إمكانية الوصول. يجب عليك استخدام التحسين التدريجي حيثما أمكن ، أي إصدار إصدار أساسي يعمل بدون البرمجة النصية ثم إضافة وظيفة البرمجة النصية فوقه.

مثال بسيط سيكون رابط منبثق. يمكنك أن تجعل واحدة مثل هذا:

<a href="javascript:window.open('http://example.com/');">link</a>

ومع ذلك ، فإن هذا الرابط لن يعمل إذا كان شخص ما ، على سبيل المثال ، انقر النقر فوق أو حاول وضع إشارة مرجعية عليه ، أو معطل البرامج النصية وما إلى ذلك ، بدلاً من ذلك ، يمكنك فعل نفس الشيء مثل هذا:

<a href="http://example.com/" 
   onclick="window.open(this.href); return false;">link</a>

لا يزال هذا غير مثالي ، لأنه يجب عليك فصل طبقات السلوك والهيكل وتجنب معالجات الأحداث المضمّنة ، لكنها أفضل ، لأنها يمكن الوصول إليها بشكل أكبر ولا تتطلب البرمجة النصية.

طريقة jQuery:

$(document).ready(function(){
    $("body").removeClass("noJS");
});

Pseudo CSS

body
    .no-js-content
        display: none;
body.noJS
    .main
        display: none;
    .no-js-content
        display: block;

لغة البرمجة

<body class="noJS">
    <div class="main">
        This will show if JavaScript is activated
    </div>
    <div class='no-js-content'>
        This will show when JavaScript is disabled
    </div>
</body>

إذا كان المحتوى منطقيًا فقط عند تمكين JavaScript ، فيجب إدراجه بواسطة رمز JavaScript مباشرة بدلاً من تقديمه. يمكن أن يتم ذلك إما عن طريق وجود قوالب HTML كسلاسل داخل رمز JavaScript الخاص بك ، أو باستخدام Ajax إذا كان HTML أكثر تعقيدًا.

مثل ذكرها رينس I. هذه هي فكرة تحسين تدريجي.

فيما يتعلق بتقنيات CSS لاستخدام اسم الفصل على علامة الجسم ، فإنني أنصح بالقيام بذلك في العكس وإضافة "js-enabled'الفصل إلى علامة الجسم مع JavaScript من شأنه أن يغير الصفحة CSS. هذا يتناسب مع تعليقي أعلاه حول الحفاظ على جميع HTML الأولي "غير ودية غير JavaScript".

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