Comment déterminez-vous le type de média en Javascript?

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

Question

J'ai regardé autour de moi et je n'ai pas encore vu cette question.

Quel est un moyen fiable en Javascript de déterminer le type de support (écran, impression, ordinateur de poche, par exemple) de la page? J'ai vu des références à document.styleSheets[0].media, mais je n'ai pas eu de chance. l’utiliser, soit à cause de problèmes de support du navigateur, soit parce que je ne comprends pas quelque chose.

Je demande parce que je veux que quelque chose soit caché par Javascript en mode d'affichage à l'écran, mais pas en mode d'impression. On ne peut pas compter sur cela pour les styles dépendant du support, car j'utilise Prototype pour exécuter un commutateur à bascule pour l'élément, et Prototype n'autorisera pas le passage à un élément visible s'il était déclaré invisible (display: none ) avec CSS * non intégré. J'ai essayé de définir des styles en-ligne spécifiques aux médias pour l'élément (<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">), mais d'après ce que je peux dire, cela n'est pas pris en charge.

Je sais que je peux parcourir les feuilles de style et vérifier si une feuille de style liée à une impression spécifique est active ou non, mais je suis actuellement dans une situation où plusieurs déclarations de style spécifiques à un support sont mélangées dans un seul fichier. feuille de style liée, donc ce n'est pas bon. Et oui, je peux simplement diviser les feuilles de style en différents types de média, mais j'aimerais tout d'abord savoir si je peux extraire de manière fiable le type de média du DOM avec Javascript, de manière totalement indépendante du CSS . Oh, et j'ai essayé cette astuce de & "Cacher un élément pour la vue d'impression, puis vérifiez si c'est visible avec Javascript &"; mais cela a toujours pour résultat (quand je charge l'aperçu avant impression) que Javascript détermine que les éléments supposés être cachés sont visibles et effectuant toutes les manipulations DOM auxquelles je le dis, malgré le fait que ces éléments ne sont pas visibles. Si quelqu'un souhaite plus de détails sur ce dont je parle ici, je peux élaborer un montage.

* C'est quelque chose que je n'ai pas compris et qui m'irrite constamment. Toute personne qui peut fournir des informations à ce sujet obtient un grand vote positif de ma part.

Était-ce utile?

La solution

  

[..], Prototype ne permet pas de basculer un élément visible si il a été déclaré invisible (display: none) avec du CSS non-inline. C'est quelque chose que je n'ai pas compris et qui m'irrite constamment. Toute personne qui peut fournir des informations à ce sujet obtient un grand vote positif de ma part.

Vous avez probablement déjà vu cela, mais la documentation, par exemple, show (il existe d'autres fonctions connexes ayant la même note): <

  

Element.show ne peut pas afficher les éléments masqués via des feuilles de style CSS. Notez qu'il ne s'agit pas d'une limitation de prototype mais d'une conséquence du fonctionnement de la propriété CSS display.

Donc, c’est un problème connu et ils accusent CSS. Cependant, considérez le document suivant (je n’avais jamais utilisé Prototype, je ne sais donc pas si c’est la méthode recommandée pour attendre le chargement du DOM, mais cela semble fonctionner): 

<!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!

Comme vous le savez déjà, cela ne fonctionnera pas. Pourquoi? Eh bien, comment Prototype saurait-il quoi & «Réinitialiser &»; la propriété p#victim à quand vous dites p à block lui-même? (En d’autres termes: comment peut-il savoir quelle aurait été la valeur de element.style.display si le '' n’était pas présent dans le jeu de règles avec le sélecteur style). La réponse est simple: elle ne le peut pas. (Réfléchissez-y un instant. Et si un autre jeu de règles modifierait la valeur de element.style si le style="display:none;" n'était pas présent dans notre jeu de règles avec le sélecteur style=""? (Nous ne pouvons donc pas supposer que par exemple <= > doit toujours être défini sur <=>, d'autres ensembles de règles peuvent avoir changé cette valeur.) Nous ne pouvons pas supprimer la propriété <=> d'un ensemble de règles dans une feuille de style, ni supprimer la totalité de la connexion entre l'élément et le jeu de règles car il peut contenir d'autres propriétés, etc. (même s'il serait possible que ce soit, à mon humble avis, non évident de trouver le jeu de règles avec lequel le faire). Bien sûr, nous pourrions aller avec cela, mais autant que je sache, il n’ya pas de solution connue à ce problème.)

Alors pourquoi l’alternative en ligne fonctionne-t-elle? Tout d’abord, regardons comment <=> est mis en œuvre: 

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

Cependant, la seule chose importante dans cette fonction est de définir <=> sur une chaîne vide (<=>), ce qui & "supprime &"; <=> à partir de <=>. Génial! Mais qu'est ce que ça veut dire? Pourquoi voudrions-nous l'enlever?! Nous devons d’abord déterminer ce que <=> représente et modifie réellement lorsque nous modifions ses valeurs.

La documentation du CDM pour <=> indique que:

  

Retourne un objet qui représente l'attribut <=> de l'élément.

Notez le dernier mot: attribut . <=> & # 8800; le courant & calculé " style pour l’élément, il s’agit simplement d’une liste des propriétés de l’attribut <=> (voir MDC pour une explication plus longue / meilleure).

Considérez le document suivant: 

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

<=> masque <=> mais lorsque le prototype DOM aura fini de charger le prototype, il sera remplacé par <=> et le navigateur recalculera la valeur de la propriété <=> (la valeur de la feuille de style par défaut du navigateur dans ce cas). ).

Mais , considérons le document suivant: 

<!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 gère correctement le contenu des feuilles de style, dans ce cas en tout cas! Cela n’est pas aussi simple à expliquer que la solution Prototype et j’ai beaucoup de choses à lire pour le moment, et jQuery ne parvient pas à calculer la valeur correcte pour <=>. (Dernière remarque rapide: Firebug ..., mais j'imagine qu'il utilise des éléments exclusifs de Firefox.)

Autres conseils

EDIT: Désolé (Note à moi-même: RTFQ Rob, sheesh!). Une rapide recherche sur Google a révélé cette fonctionnalité et un plugin jquery si cela ne sert à rien. Il utilise essentiellement les règles @media mais pas en ligne autant que je sache, de sorte que la prise en charge de votre navigateur peut varier, mais c'est le meilleur que vous puissiez espérer, je pense: (

Voyez si cela fonctionne ... Je pense que vous pouvez le faire pour tous les types et vérifiez simplement si l'instruction renvoie la valeur null ou équivalente, puis appliquez vos règles.

Depuis ce site: http: //www.webdeveloper. com / forum / showthread.php? t = 82453

  

IE:

     

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

     

FF / NS:

     

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

     

ou

     

document.styleSheets[0].media.mediaText

et un script pour le vérifier dans tous les navigateurs (à l'exception de nouveaux, alors soyez prudent:))

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

ce script fonctionne dans une instruction if comme un booléen vrai / faux! J'espère que vous allez réussir! 

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

J'ai testé mon script mentionné ci-dessus - il fonctionne désormais avec tous les nouveaux navigateurs, incl. IE8 final.

Le script a été déplacé ici: http://cssmedia.pemor.pl/ N'hésitez pas à l'utiliser si vous le souhaitez.

En ce qui concerne Marcin Wiazowski

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top