كيف يمكنك تحديد نوع الوسائط في جافا سكريبت؟

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

سؤال

نظرت حولي ولم أر هذا السؤال مطروحًا بعد.

ما هي الطريقة الموثوقة في Javascript لتحديد نوع الوسائط (على سبيل المثال:الشاشة، الطباعة، المحمولة) من الصفحة؟ لقد رأيت إشارات إلى document.styleSheets[0].media, ، ولكن لم يحالفني الحظ في استخدام هذا، إما بسبب مشكلات في دعم المتصفح أو لأنني لا أفهم شيئًا ما.

أنا أسأل لأنني أريد إخفاء شيء ما بواسطة Javascript في عرض الشاشة، ولكن ليس في عرض الطباعة.لا يمكن الاعتماد على الأنماط المعتمدة على الوسائط للقيام بذلك لأنني أستخدم Prototype لتشغيل مفتاح تبديل للعنصر، ولن يسمح النموذج الأولي بتبديل العنصر إلى مرئي إذا تم الإعلان عن أنه غير مرئي (display: none) مع CSS غير مضمّن*.لقد حاولت فقط تعيين أنماط مضمّنة خاصة بالوسائط للعنصر (<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">)، ولكن حسب ما أستطيع قوله، هذا غير مدعوم.

أعلم أنه يمكنني التنقل عبر أوراق الأنماط والتحقق لمعرفة ما إذا كانت ورقة الأنماط المرتبطة الخاصة بالطباعة نشطة أم لا، لكنني حاليًا في موقف حيث يتم خلط جميع إعلانات الأنماط المختلفة الخاصة بالوسائط في ورقة أنماط مرتبطة واحدة، لذلك هذا ليس جيدا.ونعم، يمكنني فقط تقسيم أوراق الأنماط إلى أنواع وسائط مختلفة، ولكن أود أولاً معرفة ما إذا كان بإمكاني سحب نوع الوسائط بشكل موثوق من DOM باستخدام Javascript أم لا، بشكل مستقل تمامًا عن CSS.أوه، لقد جربت هذه الخدعة المتمثلة في "إخفاء عنصر لعرض الطباعة، ثم التحقق لمعرفة ما إذا كان مرئيًا باستخدام Javascript" ولكن هذا يؤدي دائمًا (عندما أقوم بتحميل معاينة الطباعة) إلى تحديد Javascript أن من المفترض أن- تكون العناصر المخفية مرئية وتنفذ أي معالجة لـ DOM أقولها لها، بالرغم من حقيقة تلك العناصر ليست كذلك مرئي.إذا كان أي شخص يرغب في الحصول على مزيد من التفاصيل حول ما أتحدث عنه هنا، فيمكنني توضيح ذلك في التعديل.

*هذا شيء لم أفهمه وأشعر بالغضب المستمر منه.أي شخص يمكنه تقديم أي فكرة عن ذلك يحصل على تصويت كبير مني.

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

المحلول

[..]، لن يسمح النموذج الأولي بتحويل العنصر إلى مرئي إذا تم الإعلان عن أنه غير مرئي (display: none) مع CSS غير مضمنة.هذا شيء لم أفهمه وأنا منزعج باستمرار منه.أي شخص يمكنه تقديم أي فكرة عن ذلك يحصل على تصويت كبير مني.

ربما تكون قد رأيت هذا بالفعل ولكن الوثائق على سبيل المثال. show (هناك وظائف أخرى ذات صلة بنفس الملاحظة) تنص على ما يلي:

Element.show لا تستطيع عرض العناصر المخفية عبر أوراق أنماط CSS.لاحظ أن هذا ليس قيودًا على النموذج الأولي ولكنه نتيجة لكيفية عمل CSS display أعمال الملكية.

لذا، فهي مشكلة معروفة وهم يلومون CSS.ومع ذلك، فكر في المستند التالي (لم أستخدم النموذج الأولي من قبل، لذا لست متأكدًا مما إذا كانت هذه هي الطريقة الموصى بها لانتظار تحميل DOM، ولكن يبدو أنها تعمل):

<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
  $("victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!

كما تعلمون بالفعل، هذا لن ينجح.لماذا؟حسنًا، كيف يمكن للنموذج الأولي أن يعرف ما يجب "إعادة ضبطه"؟ display الملكية عندما تقول p#victim ل show بحد ذاتها؟(بعبارة أخرى:كيف يمكن معرفة ما ينبغي أن يكون قيمة display إذا display: none لم يكن موجودًا في مجموعة القواعد مع p#victim محدد.) الجواب بسيط:لا يمكن ذلك.(فكر بخصوصها لثانية.ماذا لو كانت مجموعة قواعد أخرى ستعدل قيمة display إذا display: none لم يكن موجودًا في مجموعة القواعد الخاصة بنا مع p#victim محدد؟(أي.لا يمكننا أن نفترض ذلك على سبيل المثال. p يجب دائمًا ضبطه على block, ، ربما تكون مجموعات القواعد الأخرى قد غيرت هذه القيمة.) لا يمكننا إزالة display خاصية من مجموعة قواعد في ورقة أنماط، ولا يمكننا إزالة الاتصال بالكامل بين العنصر ومجموعة القواعد لأنه قد يحتوي على خصائص أخرى وما إلى ذلك (حتى لو كان من الممكن أن يكون ذلك، إيمهو، غير واضح يجد أيّ مجموعة القواعد للقيام بذلك).بالطبع، يمكننا الاستمرار في هذا، ولكن لا يوجد حل معروف لهذه المشكلة.)

إذن لماذا يعمل البديل المضمن؟أولا، دعونا ننظر في كيفية ذلك show تم تنفيذه:

show: function(element) {
  element = $(element);
  element.style.display = ''; // <-- the important line
  return element;
}

Afaict الشيء الوحيد المهم الذي تفعله هذه الوظيفة هو الضبط element.style.display إلى سلسلة فارغة ('')، الذي "يزيل" display من style.عظيم!لكن ماذا يعني هذا؟لماذا نريد إزالته؟!أولا علينا أن نعرف ما element.style يمثل في الواقع ويعدل عندما نعدل قيمه.

وثائق MDC لـ element.style ينص علي:

إرجاع كائن يمثل العنصر style يصف.

لاحظ الكلمة الأخيرة: يصف. element.style ≠ النمط "المحسوب" الحالي للعنصر، هو مجرد قائمة بالخصائص الموجودة في ملف style السمة (راجع MDC للحصول على شرح أطول/أفضل).

النظر في الوثيقة التالية:

<!doctype html>
<script src="prototype.js"></script>
<script>
document.observe("dom:loaded", function() {
  $("victim").show();
});
</script>
<p id="victim" style="display:none;">Hello world!

style="display:none;" يخفي p#victim ولكن عندما ينتهي DOM من تحميل النموذج الأولي، سيتم تغييره إلى style="", ، وسيقوم المتصفح بإعادة حساب قيمة display الخاصية (القيمة من ورقة الأنماط الافتراضية للمتصفح في هذه الحالة).

لكن, ، خذ بعين الاعتبار الوثيقة التالية:

<!doctype html>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
  $("#victim").show();
});
</script>
<style>
p#victim {display:none;}
</style>
<p id="victim">Hello world!

يتعامل jQuery مع عناصر أوراق الأنماط بشكل صحيح، في هذه الحالة على أي حال!هذا ليس سهل الشرح مثل حل النموذج الأولي وهناك العديد من طبقات الذهول التي يمكنني قراءتها الآن، وهناك العديد من الحالات التي يفشل فيها jQuery في حساب القيمة الصحيحة لـ display .(ملاحظة أخيرة سريعة:Firebug...، ولكن أعتقد أنه يستخدم بعض الأشياء الحصرية لمتصفح Firefox أو شيء من هذا القبيل.)

نصائح أخرى

يحرر:آسف (ملاحظة لنفسي:RTFQ روب، شيش!).بحث سريع على جوجل هذا يصل و أ البرنامج المساعد مسج إذا كان هذا أي فائدة.إنها تستخدم بشكل أساسي قواعد @media ولكنها ليست مضمنة بقدر ما أستطيع أن أقول، لذلك قد يختلف دعم متصفحك ولكنه أفضل ما يمكن أن تتمناه على ما أعتقد :(

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

من هذا الموقع: http://www.webdeveloper.com/forum/showthread.php?t=82453

أي:

if (document.styleSheets[0].media == 'screen'){...}

FF/NS:

document.getElementsByTagName ('LINK')[0].getAttribute ('media')

أو

document.styleSheets[0].media.mediaText

وبرنامج نصي للتحقق من ذلك في جميع المتصفحات (باستثناء بعض المتصفحات الجديدة، لذا كن حذرًا :))

http://student.agh.edu.pl/~marcinw/cssmedia/

يعمل هذا البرنامج النصي في عبارة if باعتبارها صواب/خطأ منطقي!نأمل أن تحصل عليه للعمل!

document.getElementsByTagName('link').each(function( link )
{
  //do something with link.media
  //hide whatever you need to hide, etc
});

لقد اختبرت النص البرمجي المذكور أعلاه - وهو يعمل الآن مع جميع المتصفحات الجديدة، بما في ذلك.IE8 النهائي.

تم نقل النص هنا: http://cssmedia.pemor.pl/لا تتردد في استخدامه إذا كنت تريد فقط.

فيما يتعلق مارسين ويازوفسكي

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