Come si determina il tipo di media in Javascript?

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

Domanda

Mi sono guardato intorno e non ho ancora visto questa domanda.

Qual è un modo affidabile in Javascript per determinare il tipo di supporto (ad es. schermo, stampa, palmare) della pagina? Ho visto riferimenti a document.styleSheets[0].media, ma non ho avuto fortuna usando questo, o a causa di problemi di supporto del browser o perché non capisco qualcosa.

Lo sto chiedendo perché voglio che qualcosa sia nascosto da Javascript nella vista schermo, ma non nella vista stampa. Non è possibile fare affidamento sugli stili dipendenti dai media per fare questo perché sto usando Prototype per eseguire un interruttore a levetta per l'elemento e Prototype non consentirà a un elemento di passare a visibile se è stato dichiarato invisibile (display: none ) con CSS non in linea *. Ho provato a impostare solo stili incorporati specifici per i media per l'elemento (<div style="@media print { foo: bar; } @media screen { blargh: bfargle; }">), ma da quello che posso dire non è supportato.

So che posso scorrere i fogli di stile e controllare se è attivo o meno un foglio di stile collegato specifico per la stampa, ma attualmente mi trovo in una situazione in cui varie dichiarazioni di stile specifiche per i media sono tutte mescolate in un unico foglio di stile collegato, quindi non va bene. E sì, posso semplicemente dividere i fogli di stile in diversi tipi di media, ma vorrei prima capire se posso semplicemente estrarre in modo affidabile il tipo di media dal DOM con Javascript, completamente indipendentemente dal CSS . Oh, e ho provato quel trucco di & Quot; nascondi un elemento per la vista di stampa, quindi controlla se è visibile con Javascript & Quot; ma ciò porta sempre a (quando carico l'anteprima di stampa) Javascript che determina che gli elementi che si suppone debbano essere nascosti sono visibili e che eseguono qualsiasi manipolazione DOM gli dico, nonostante il fatto che quegli elementi non sono visibili. Se qualcuno desidera maggiori dettagli su ciò di cui sto parlando qui, posso elaborare una modifica.

* Questo è qualcosa che non ho capito e di cui sono costantemente irritato. Chiunque sia in grado di fornire informazioni dettagliate in merito ottiene un grande apprezzamento da parte mia.

È stato utile?

Soluzione

  

[..], Prototype non consentirà che un elemento diventi visibile se è stato dichiarato invisibile (display: none) con CSS non inline. Questo è qualcosa che non ho capito e di cui sono costantemente irritato. Chiunque sia in grado di fornire informazioni dettagliate in merito ottiene un grande apprezzamento da parte mia.

Probabilmente hai già visto questo, ma la documentazione per es. show (ci sono altre funzioni correlate con la stessa nota) afferma che:

  

Element.show non può visualizzare elementi nascosti tramite fogli di stile CSS. Si noti che questa non è una limitazione del prototipo ma una conseguenza del funzionamento della proprietà CSS display.

Quindi, è un problema noto e danno la colpa ai CSS. Tuttavia, considera il seguente documento (non ho mai usato Prototype prima, quindi non sono sicuro se questo è il modo consigliato di attendere il caricamento del DOM, ma sembra funzionare): 

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

Come già sai, questo non funzionerà. Perché? Bene, come farebbe Prototype a sapere cosa & Quot; resettare & Quot; la proprietà p#victim a quando dici da p a block stesso? (In altre parole: come può scoprire quale avrebbe dovuto essere il valore di element.style.display se '' non fosse presente nel set di regole con il selettore style.) La risposta è semplice: non può. (Pensaci un secondo. E se un altro set di regole modificasse il valore di element.style se style="display:none;" non fosse presente nel nostro set di regole con il selettore style=""? (Vale a dire che non possiamo supporre che ad esempio <= > deve sempre essere impostato su <=>, altri set di regole potrebbero aver modificato quel valore.) Non possiamo rimuovere la proprietà <=> da un set di regole in un foglio di stile e non possiamo rimuovere l'intera connessione tra l'elemento e il set di regole perché può contenere altre proprietà e così via (anche se sarebbe possibile, non è ovvio trovare con quale set di regole per farlo). Naturalmente, potremmo andare ancora e ancora, ma afaik non esiste una soluzione nota a questo problema.)

Allora perché l'alternativa in linea funziona? Innanzitutto, vediamo come viene implementato <=>: 

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

Afaict l'unica cosa importante che questa funzione fa è impostare <=> su una stringa vuota (<=>), che " rimuove " <=> da <=>. Grande! Ma cosa significa? Perché dovremmo rimuoverlo ?! Innanzitutto dobbiamo scoprire cosa <=> rappresenta e modifica effettivamente quando ne modificiamo i valori.

La documentazione MDC per <=> afferma che:

  

Restituisce un oggetto che rappresenta l'attributo <=> dell'elemento.

Nota l'ultima parola: attributo . <=> & # 8800; l'attuale " calcolato " stile per l'elemento, è solo un elenco delle proprietà nell'attributo <=> (vedi MDC per una spiegazione più lunga / migliore).

Considera il seguente documento: 

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

<=> nasconde <=> ma quando il DOM ha finito di caricare Prototype lo cambierà in <=> e il browser ricalcola il valore per la proprietà <=> (il valore dal foglio di stile predefinito del browser in questo caso ).

Ma , considera il seguente documento: 

<!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 gestisce correttamente i fogli di stile, in questo caso comunque! Questo non è così semplice da spiegare come la soluzione Prototype e ci sono molti livelli di meraviglia per me da leggere in questo momento, e ci sono molti casi in cui jQuery non riesce a calcolare il valore corretto per <=>. (Ultima nota rapida: Firebug ..., ma suppongo che usi alcune cose esclusive di Firefox o qualcosa del genere.)

Altri suggerimenti

EDIT: Siamo spiacenti (Nota per sé: RTFQ Rob, sheesh!). Un rapido googling turfed ha questo su e un plugin jquery se è utile. In pratica sta usando le regole di @media ma non è in linea per quanto ne so, quindi il supporto del tuo browser può variare ma è il massimo che puoi sperare, credo :(

Verifica se funziona ... Penso che puoi farlo per ogni tipo e controlla solo se l'istruzione restituisce un valore nullo o equivalente, quindi applica le tue regole.

Da questo sito: http: //www.webdeveloper. com / forum / showthread.php? t = 82453

  

IE:

     

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

     

FF / NS:

     

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

     

o

     

document.styleSheets[0].media.mediaText

e uno script per controllarlo in tutti i browser (tranne alcuni nuovi, quindi fai attenzione :))

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

questo script funziona in un'istruzione if come un vero / falso booleano! Spero che riuscirai a farlo funzionare! 

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

Ho testato il mio script di cui sopra - ora funziona con tutti i nuovi browser, incl. IE8 final.

Lo script è stato spostato qui: http://cssmedia.pemor.pl/ Sentiti libero di usarlo se solo lo desideri.

Per quanto riguarda Marcin Wiazowski

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top