كيفية عرض المحتوى عندما جافا سكريبت غير متوفر ، إخفائه عندما جافا سكريبت هو متاح و لا تومض في أي حالة ؟

https://stackoverflow.com/questions/1006798

06-07-2019
|

سؤال

لدي نموذج بسيط عن خيارات الشحن و أنا باستخدام جافا سكريبت لصناعة السيارات تقديم النموذج عند شخص يختار خيار جديد من القائمة المنسدلة.

من أجل دعم المتصفحات بدون جافا سكريبت هناك أيضا زر إرسال النموذج.هذا الزر هو مخفي باستخدام جافا سكريبت.

ومع ذلك, هذا يعني ان زر غير مرئية لفترة وجيزة من الوقت يمكن أن تسبب وميض مثل باقي المحتوى هو إخراجها.

يمكن لأي شخص أن يقترح طريقة إنشاء الزر حتى يبدأ خفية ، ولكن تظهر فقط إذا كان جافا سكريبت غير متوفر ؟ على سبيل المثال ، تبدأ مع display:none;وتغيير سحرية إلى display:block;إذا و فقط إذا كان هناك أي جافا سكريبت.

المحلول

وضعت للتو أي شيء داخل علامات <noscript> ... </noscript> وبعد ذلك سوف تظهر فقط إذا لم يتم تمكين جافا سكريبت / المتاحة.

نصائح أخرى

وذلك يعتمد على الطريقة التي يتم إخفائه، الذي تستخدمه في DOM جاهزا أو نافذة مستعد؟ نافذة ينتظر جاهزة لجميع الصور لتحميل، الذي هو عادة وقتا طويلا جدا.

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

<noscript>
    <input type="submit" />
</noscript>

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

مجرد كتابة جافا سكريبت غير مزعجة: http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/.

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

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

في هذه الصفحة انظر التعليق 5 حل جيد أن يكون قادرا على إجراء تغييرات قبل أي شيء هو في الواقع عرض:http://dean.edwards.name/weblog/2006/06/again/

هل يمكن استخدام البرنامج النصي قبل وبعد زر الإرسال لكتابة مخفي عنصر div تبدأ وعلامات نهاية.

سوف

وأحد الخيارات هو أن تبدأ مع الزر الخاص بك هو مبين، ثم قم بتعديل CSS لها من جافا سكريبت:

<head>
    ...
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8">
    <script>
        document.styleSheets[0].addRule(".hideMe", "display:none");
    </script>
    ...
</head>

وتعديل أنماط بدلا من زر (ووضع هذا الرمز <م> خارج من ONLOAD) يضمن أنه سوف تكون مخفية قبل ويوجه الزر.

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow